Tooltip for Angular 2

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

Try it show Shows the tooltip.
Try it hide Hides the tooltip.

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+

Tooltip for Angular