Advanced User Interface Controls and Components

Overview of IntegralUI Tooltip for Angular 2

Created: 25 October 2016

Updated: 24 March 2017

IntegralUI Tooltip is a native Angular 2 directive that can be attached to any component or HTML element. It provides functionality that allows you to add a tooltip that will be displayed at specified position, with initial delay and will remain visible by specified amount of time.

Tooltip component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at

In above demo we have a control panel where you can set different properties of Tooltip component. You can choose the initial delay before tooltip is shown, how long it will remain visible, position at which will appear and whether it is enabled or not.

How to Use IntegralUI Tooltip in Angular 2

The Tooltip component is simple to use. You only need to attach the iuiTooltip attribute to some HTML element or Angular 2 component. Next, you need to set up the behavior of the directive by applying an object that holds the following properties:

  • appRef - holds a reference to application view
  • autoPopDelay - specifies the time in milliseconds for Tooltip to remain visible
  • enabled - determines whether the Tooltip is enabled or disabled
  • initialDelay - specifies the time in milliseconds prior Tooltip is shown
  • position - determines where the Tooltip will appear: above, below, left or right side of the target element or at mouse position
  • showMarker - when true, an arrow marker will be displayed for the Tooltip window
  • title - specifies the content of the Tooltip

Most of above properties are optional, and you can create an object that specifies only a few of them. The only requirement is the appRef field, which specifies the root component that is used as a reference to which the Tooltip component is added.


// main.ts file



import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';


const platform = platformBrowserDynamic();






// app.module.ts file



import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { IntegralUIModule } from 'integralui/integralui.module';



imports: [ BrowserModule, FormsModule, IntegralUIModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]


export class AppModule { }





// app.component.ts file



import { Component, ViewContainerRef, ViewChild } from '@angular/core';



selector: 'iui-app',

templateUrl: 'app.template.html',

styleUrls: ['tooltip-overview.css']


export class AppComponent {

@ViewChild('application', {read: ViewContainerRef}) applicationRef: ViewContainerRef;


private tooltipPositions = [ 'mouse', 'above', 'below', 'left', 'right' ];


private tooltipSettings = {

appRef: null,

autoPopDelay: 3000,

enabled: true,

initialDelay: 1000,

position: 'mouse',

showMarker: true,

title: 'Tooltip Title'






this.tooltipSettings.appRef = this.applicationRef;




this.tooltipSettings.enabled = !this.tooltipSettings.enabled;




this.tooltipSettings.showMarker = !this.tooltipSettings.showMarker;




// app.template.html file



<div class="panel" [iuiTooltip]="tooltipSettings">

<span>Move mouse cursor here to show a tooltip.</span>


<div class="feature-panel">

<label>Tooltip Properties: </label><br /><br />

<span>Enabled</span><input type="checkbox" [checked]="tooltipSettings.enabled" (click)="updateEnabled()" style="width:auto" /><br />

<span>Auto-Pop Delay</span><input type="number" [(ngModel)]="tooltipSettings.autoPopDelay" min="0" [disabled]="!tooltipSettings.enabled" /><br />

<span>Initial Delay</span><input type="number" [(ngModel)]="tooltipSettings.initialDelay" min="0" [disabled]="!tooltipSettings.enabled" /><br />

<span>Position</span> <select [(ngModel)]="tooltipSettings.position" [disabled]="!tooltipSettings.enabled"><option *ngFor="let obj of tooltipPositions" [value]="obj">{{obj}}</option></select><br />

<span>Show Marker</span><input type="checkbox" [checked]="tooltipSettings.showMarker" (click)="updateShowMarker()" style="width:auto" [disabled]="!tooltipSettings.enabled" /><br />

<span>Title</span><input type="text" [(ngModel)]="tooltipSettings.title" style="width:200px" [disabled]="!tooltipSettings.enabled" />



tooltip-overview.css file




background: white;

border: thin solid gray;

display: inline-block;

width: 400px;

height: 250px;

vertical-align: top;


.panel span


color: #808080;

cursor: default;

display: block;

margin: 120px auto;

text-align: center;




display: inline-block;

padding-left: 20px;

width: 350px;

vertical-align: top;


.feature-panel label


display: inline-block;

text-align: center;

width: 200px;


.feature-panel span


display: inline-block;

margin-right: 5px;

text-align: right;

width: 120px;


.feature-panel input


margin: 7px 3px;

width: 50px;


.feature-panel select


padding: 2px 0;

width: 100px;


As you can see from above HTML code, we are using the iuiTooltip name to attach a tooltip to a block element. To bind the object that holds the tooltip settings, we only need to enclose the directive name with standard Angular binding brackets []. Next, you need to apply the object to the right of the directive name.

As the directive settings state, the tooltip will be displayed by initial delay of 1 second, will remain visible for 3 seconds and will appear at mouse cursor position.


IntegralUI Tooltip is a small Angular 2 directive that is attachable to any component or HTML element. You can add a tooltip to custom HTML element dynamically during run-time, by simply applying the directive name as attribute of the specified element.

The Tooltip component is part of IntegralUI Web.


Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.
Name: Email: *
*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.