Home

Awesome

Tooltip for Angular

forked from drozhzhin-n-e/ng2-tooltip-directive

The tooltip is a pop-up tip that appears when you hover over an item or click on it.

Installation

Install the npm package.

npm i @cloudfactorydk/ng2-tooltip-directive
    

Import Ng2Module:

import { TooltipModule } from '@cloudfactorydk/ng2-tooltip-directive';
 
@NgModule({
    imports: [ TooltipModule ]
}) 

Usage

Options can be set in the directive tag, so they have the highest priority.

<span tooltip="Tooltip" placement="top" showDelay="500">Tooltip on top</span>

You may pass as an object:

<span tooltip="Tooltip" [options]="myOptions">Tooltip on left</span>
myOptions = {
    'placement': 'left',
    'showDelay': 500
}

You can pass HTML as content :

<span tooltip="<p>Hello i'm a <strong>bold</strong> text!</p>">
  Tooltip with HTML content
</span>
<ng-template #HtmlContent>
  <p>Hello i'm a <strong>bold</strong> text!</p>
</ng-template>

<span [tooltip]="HtmlContent" contentType="template">
  Tooltip with template content
</span>

Set default values

Create a file with your settings, for example:

import { TooltipOptions } from '@cloudfactorydk/ng2-tooltip-directive';

export const MyDefaultTooltipOptions: TooltipOptions = {
  'show-delay': 500
}

And pass your parameters when importing the module:

import { TooltipModule, TooltipOptions } from '@cloudfactorydk/ng2-tooltip-directive';
import { MyDefaultTooltipOptions } from './my-default-options';
 
@NgModule({
    imports: [ 
      TooltipModule.forRoot(MyDefaultTooltipOptions as TooltipOptions)
    ]
})

Properties

nametypedefaultdescription
placement"top", "bottom", "left", "right""top"The position of the tooltip.
autoPlacementbooleantruePlace the tooltip so that it does not go beyond the borders of the browser window.
showDelaynumber0The delay in ms before showing the tooltip.
hideDelaynumber300The delay in ms before removing the tooltip.
hideDelayTouchscreennumber0Delay in milliseconds before hiding the tooltip (for mobile devices).
displaybooleantrueTooltip availability for display.
displayTouchscreenbooleantrueDisplay the tooltip on mobile devices.
zIndexnumber0Z-index of the tooltip.
trigger"hover", "click""hover"Specifies how the tooltip is triggered. Control the closing time with "hide-delay".
tooltipClassstringClasses to be passed to the tooltip.
animationDurationnumber300The duration controls how long the animation takes to run from start to finish.
theme"dark", "light""dark"Theme of tooltip background and text.
shadowbooleantrueShadow of the tooltip.
offsetnumber8Offset the tooltip relative to the item.
widthnumberundefinedWidth of the tooltip.
maxWidthnumber200Maximum width of the tooltip.
contentType"string", "html', "template""string"The content type passed to the tooltip.
hideDelayAfterClicknumber2000Tooltip hiding delay for "click" trigger.
pointerEvents"auto", "none""none"Defines whether or not an element reacts to pointer events.
position{top: number, left: number}undefinedThe tooltip coordinates relative to the browser window.

Events

When you call events, the delays that are specified in the options in the directive are taken into account. Default delay before tooltip hiding is 300 milliseconds.

EventDescription
{type: "show", position: DOMRect}The event is called before the tooltip appears.
{type: "shown", position: DOMRect}The event is called after the animation of the appearance of the tooltip.
{type: "hide", position: DOMRect}The event is called before the tooltip is hidden.
{type: "hidden", position: DOMRect}The event is called after the animation of the tooltip is hidden.

Methods

If you specified the directive options, they will be taken into account when calling methods. Including the delay before the appearance and hiding of the tooltip.

MethodDescription
show()Shows the tooltip
hide()Hides the tooltip