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.|