Tooltip

The Tooltip control represents a popup window, containing a custom message. Here is a typical tooltip shown when the user hovers with the mouse over a TreeNode in a TreeView:

1.Creating and showing a tooltip

The Tooltip constructor expects two parameters, which are the tooltip target, or the DOM element to which the tooltip is linked, and the message text.

JavaScript

var text = "Select items from the list to highlight the corresponding DOM element in the page";
var tip = new ui.Tooltip(listView.element, text);
tip.position = ui.TooltipPosition.Left;
tip.theme = theme;
tip.render();

The tooltip will be shown automatically when the event, specified by its trigger property, occurs on the target element, e.g. when it is hovered. The tooltip will be hidden automatically when a matching event occurs, e.g. then the mouse leaves the target element.

JavaScript

tooltip.trigger = ui.TooltipTrigger.Hover;

Programmatically, the tooltip's visibility can be controlled via the show, hide, and toggle methods.

JavaScript

if(tooltip.target == diagram._element)
       tooltip.toggle();

2. Customization

By default, the ToolTip will be shown when the user hovers the target's DOM element. The triggering event can be changed by setting the trigger property to another of the TooltipTrigger enumeration values. TooltipTrigger.Click will show the tooltip when the target element is clicked, and will hide it upon subsequent click. Setting it to TooltipTrigger.None would mean that the tooltip's visibility is to be controlled programmatically.

JavaScript

tooltip.trigger = ui.TooltipTrigger.None;if(tooltip.target == listItem1.element)
       tooltip.show();

The position property specifies where, relative to the target's element bounds, will the tooltip be shown. If the property is set to TooltipPosition.Cursor an additional property - follow, can be used to specify whether the tooltip should follow the mouse cursor.

JavaScript

toolTip.position = TooltipPosition.Cursor;
tooltip.follow = false;

The content of the tooltip can be set to a custom HTML string via its template property.

JavaScript

var tip = new ui.Tooltip(listItem.element);
var t = document.createElement("div");
var img = document.createElement("img");
img.width = img.height = "40";
img.src = "icon_fish.png";
img.style.verticalAlign = "middle";
t.appendChild(img);
var span = document.createElement("span");
span.innerText = "This user is not currently online";
t.appendChild(span);
tip.template = t.outerHTML;

The appearance of the control can be modified by setting its theme and cssClass properties.

3. Events

Important events for the ToolTip control include:

• tooltipShowing- a validation event, raised when the tooltip is showing.
• tooltipShow - a notification event, raised when the tooltip is shown.
• tooltipHiding - a validation event, raised when the tooltip is hiding.
• tooltipHide - a notification event, raised when the tooltip is hidden.

JavaScript

tooltip.tooltipShowing.addEventListener(handleTooltipShowing);function handleTooltipShowing(sender, args)
{
 if (sender.target == listItem1)
   args.cancel = true;
}