1.0.1 • Published 3 years ago
ngx-custom-tooltip v1.0.1
ngx-custom-tooltip
This library was generated with Angular CLI version 9.1.13.
About
Simple and customizable tooltip/pop-up component for Angular projects.
It can be used as a tooltip (it closes when you click outside of it), or as a pop-up with a close button.
It has a ng-content
tag, so you can place all kinds of html elements inside them.
Get Started
Step 1: Install ngx-virtual-scroller
npm install ngx-custom-tooltip
Step 2: Import NgxCustomTooltipModule module into your app.module.ts
....
import { NgxCustomTooltipModule } from 'ngx-custom-tooltip';
....
@NgModule({
...
imports: [
....
NgxCustomTooltipModule
],
....
})
export class AppModule { }
Step 3: Wrap ngx-custom-tooltip tag around your elements in the app.component.html file
<button #target>Open</button>
<ngx-custom-tooltip [target]="target"
(closeEmitter)="handleClose($event)">
<p>This is a tooltip message!</p>
</ngx-custom-tooltip>
Options
Attribute | Type | Default value | Description |
---|---|---|---|
bgColor | string | '#ffffff' | background-color property for the tooltip. |
borderColor | string | '#d3d3d3' | border-color property for the tooltip. |
borderRadius | string | '4px' | border-radious property for the tooltip. Accepts css syntax. |
closeButton | boolean | false | Indicates if the tooltip has a close button. If false, it closes when you click outside of it. |
closeButtonImage | string | undefined | Image path for close button. |
closeButtonMargin | string | '20px' | Separation of the close button from the border. By default it is placed in the upper right corner. Accepts css syntax. |
closeButtonSize | string | '20px' | height and widht properties for the close button. Accepts css syntax. |
displacement | number | 0 | Arbitrary offset of the tooltip from its target. It is ignored if a center type position is chosen. Example: topCenter . |
floatingSize | number | 3 | Move the tooltip away from its target. |
maxHeight | string | 'max-content' | Maximum height, after that, a vertical scroll appears. Accepts css syntax. |
maxWidth | string | 'max-content' | Maximum width, after that, a horizontal scroll appears. Accepts css syntax. |
minHeight | string | 'auto' | Minimun height for the tooltip. Accepts css syntax. |
minWidth | string | 'auto' | Minimun width for the tooltip. Accepts css syntax. |
padding | string | '8px' | padding property for the tooltip. Accepts css syntax. |
popUpPosition | string | 'topCenter' | The position of the tooltip. Valid values: ['topStart', 'topCenter', 'topEnd', 'bottomStart', 'bottomCenter', 'bottomEnd', 'leftStart', 'leftCenter', 'leftEnd', 'rightStart', 'rightCenter', 'rightEnd'] . |
target | HTMLElement | undefined | The HTMLEelement that activates the tooltip. If closeButton is false the target is excluded for the clickout event that close the button. |
triangleBgColor | string | undefined | background-color property for the triangle. If not provided, bgColor is used. |
(closeEmitter) | boolean | Emit false when tooltip is closed. |