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.

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.

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. 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.

Newsletter

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.