LIDOR SYSTEMS

Advanced User Interface Controls and Components

Overview of IntegralUI Tooltip for Angular 2

Created: 25 October 2016

Updated: 21 December 2016

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 Studio for Web
a suite of UI Components for development of web apps

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();

platform.bootstrapModule(AppModule);

 

 

 

//

// 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-web/integralui.module';

 

@NgModule({

imports: [ BrowserModule, FormsModule, IntegralUIModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

 

 

 

//

// app.component.ts file

//

 

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

 

@Component({

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'

}

 

constructor(){}

 

ngAfterViewInit(){

this.tooltipSettings.appRef = this.applicationRef;

}

 

updateEnabled(){

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

}

 

updateShowMarker(){

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>

<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" />

</div>

/*

tooltip-overview.css file

*/

.panel

{

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;

}

.feature-panel

{

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.

Conclusion

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

Currently this component is in BETA.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.