Items with Tooltip in TreeView Component

By default, items in TreeView component don't have a tooltip attached. However, you can add your own tooltip to each item that will appear whenever mouse hovers over the item space. In this article, you will learn how to use IntegralUI Tooltip component to add a tooltip to each item.

In following sections below, you will find sample code in JavaScript, Angular, React and Vue that shows how to add tooltips to tree view items.

In this example, when mouse cursor moves over item space, after small delay a tooltip will popup showing the item text.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

How to Add Tooltip to Tree Items

Before attaching the tooltip to the tree item, you need to create an object that will hold the tooltip settings. The following properties are available:

• autoPopDelay - specifies how long the tooltip will remain visible
• enabled - determines whether tooltip is enabled or not, if false tooltip will not appear
• initialDelay - specifies the initial time before tooltip appears
• position - determines where the tooltip will appear

• JavaScript
• Angular
• React
• Vue

You can use any custom HTML element that represents a tooltip. In this example, the item template is modified so that item content is set inside the IntegralUI Tooltip component. This is needed so that during run-time when mouse hovers item space, the tooltip component will know the boundaries within which it will appear if the mouse enters that space.

• JavaScript
• Angular
• React
• Vue

In this way, whenever a mouse cursor is moved over item label, the tooltip will appear. If you move quickly across different items, the tooltip will not appear, because of the initial delay set. You can have different tooltip settings for each item separately.

Tooltip is customizable using CSS. You can change the background, text color, border etc. by using custom CSS properties or modifying existing CSS classes.

Conclusion

To show a tooltip for items in TreeView component is simple. You need to use the IntegralUI Tooltip component, and set when and how long the tooltip will remain active. By creating a template for the items, you can apply the tooltip to each item separately, with different settings if required. In addition, tooltip is fully customizable via CSS.

TreeView is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks