Subtle Tooltip Directive For Angular 2+

Author: drozhzhin-n-e
Publish Date:
Official Page: Go to website
Views Total: 80
License: MIT

Description:

A pretty simple and elegant tooltip directive created for Angular 2+ app.

How to use it:

Install the package with NPM:

# NPM
$ npm install ng2-tooltip-directive --save

Import it into ngModule.

import { TooltipDirective } from 'ng2-tooltip-directive/components';
 
@NgModule({
    declarations: [ TooltipDirective ]
})

Usage.

<button tooltip="Tooltip" placement="top" style="margin: 10px 10px 10px 0;">Tooltip on top</button>
<button tooltip="Lorem ipsum dolor sit amet, his ut dicunt recteque ea." placement="bottom" style="margin: 10px 10px 10px 0;">Tooltip on bottom</button>
<button tooltip="Tooltip" placement="left" style="margin: 10px 10px 10px 0;">Tooltip on left</button>
<button tooltip="Lorem ipsum dolor sit amet, his ut dicunt recteque ea." placement="right" delay="500" style="margin: 10px 10px 10px 0;">Tooltip on right, delay 500ms</button>

Props.

  • placement: “top”, “bottom”, “left”, “right”. Default: ‘top’
  • show-delay: The delay in ms before showing the tooltip. Default: 0.
  • hide-delay: The delay in ms before removing the tooltip. Default: 300.
  • z-index: Z-index of the tooltip. Default: false.

Preview:

ng2-tooltip-directive

 

Tags:

Leave a Reply