| Author: | drozhzhin-n-e |
|---|---|
| Official Page: | Go to website |
| Publish Date: | November 29, 2017 |
| 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:
