Basic usage
Installation
Install the npm package.
npm i ng2-tooltip-directive
Import module:
import {TooltipModule} from 'ng2-tooltip-directive';
@NgModule({
imports: [TooltipModule]
})
Usage
Options can be set in the element tag, in which case they have the highest priority.
<span tooltip="Tooltip" placement="top" show-delay="500">Tooltip on top</span>
You may pass as an object:
<span tooltip="Tooltip" [options]="myOptions">Tooltip on left</span>
myOptions = {
'placement': 'left',
'show-delay': 500
}
Properties
placement"top" | "bottom" | "left" | "right" = "top"
The position of the tooltip.
|
show-delaynumber = 0
The delay in ms before showing the tooltip.
|
hide-delaynumber = 300
The delay in ms before removing the tooltip.
|
hide-delay-mobilenumber = 1500
Delay in milliseconds before hiding the tooltip (for mobile devices).
|
displayboolean = true
Tooltip availability for display.
|
display-mobileboolean = true
Display the tooltip on mobile devices.
|
z-indexnumber = 0
Z-index of the tooltip.
|
trigger"hover" | "click" = "hover"
Specifies how the tooltip is triggered. Control the closing time with "hide-delay".
|
tooltip-classstring
Classes to be passed to the tooltip.
|
animation-durationnumber = 300
The duration controls how long the animation takes to run from start to finish.
|
Style
Try it
theme"dark" | "light" = "dark"
Theme of tooltip background and text.
|
Try it
shadowboolean = true
Shadow of the tooltip.
|
Try it
offsetnumber = 8
Offset the tooltip relative to the item.
|
Events
When calling events, the delays specified in the directive options are taken into account. A default delay before hiding the pop-up tip is 300 milliseconds.
Try it
show
The event is called before the tooltip appears.
|
Try it
shown
The event is called after the animation of the appearance of the tooltip.
|
Try it
hide
The event is called before the tooltip is hidden.
|
Try it
hidden
The event is called after the animation of the tooltip is hidden.
|
Methods
If you specify the directive options, they will be accounted for at methods calling (including the delay before the display of a tooltip and its consequent hiding).
Browser support
Chrome / Chrome for Android | 50+ / partial support |
FireFox | 36+ |
Opera | 44+ |
Safari / iOS Safari | 10.1, 11.1 / partial support |
Internet Explorer | Edge 15+ |