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.

Package detail

ngx-custom-tooltip

readme

ngx-custom-tooltip

About

Get Started

Options