Advanced User Interface Controls and Components
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.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
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.
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:
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/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.
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.