Skip to content
The tooltip is a pop-up tip that appears when you hover over an item or click on it.
Branch: master
Clone or download
Latest commit d4cdb81 Mar 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e Update Angular Mar 18, 2019
src Merging Mar 18, 2019
.editorconfig Update Angular Mar 18, 2019
.gitignore
LICENSE
README.md Update README.md Mar 18, 2019
angular.json Update Angular Mar 18, 2019
package-lock.json Update Angular Mar 18, 2019
package.json Update Angular Mar 18, 2019
tsconfig.json
tslint.json

README.md

Tooltip for Angular

Build Status

Installation

Install the npm package.

npm i ng2-tooltip-directive

Import Ng2Module:

import { TooltipModule } from '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" 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
}

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" content-type="template">
  Tooltip with template content
</span>

Properties

name type default description
placement "top", "bottom", "left", "right" "top" The position of the tooltip.
show-delay number 0 The delay in ms before showing the tooltip.
hide-delay number 300 The delay in ms before removing the tooltip.
hide-delay-mobile number 1500 Delay in milliseconds before hiding the tooltip (for mobile devices).
display boolean true Tooltip availability for display.
display-mobile boolean true Display the tooltip on mobile devices.
z-index number 0 Z-index of the tooltip.
trigger "hover", "click" "hover" Specifies how the tooltip is triggered. Control the closing time with "hide-delay".
tooltip-class string Classes to be passed to the tooltip.
animation-duration number 300 The duration controls how long the animation takes to run from start to finish.
theme "dark", "light" "dark" Theme of tooltip background and text.
shadow boolean true Shadow of the tooltip.
offset number 8 Offset the tooltip relative to the item.
max-width string "200px" Maximum width of the tooltip.
content-type "string", "html', "template" "string" The content type passed to the tooltip

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.

Event Description
show The event is called before the tooltip appears.
shown The event is called after the animation of the appearance of the tooltip.
hide The event is called before the tooltip is hidden.
hidden 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.

Method Description
show() Shows the tooltip
hide() Hides the tooltip

Demo

http://crystalui.org/components/tooltip

Sponsors

We use Browserstack for cross-browser testing.

Browserstack

You can’t perform that action at this time.