JS Tooltip

Render guiding information when users need it.

Much more than a traditional tooltip

You can combine any number of JavaScript UI elements to render well-styled and useful tips that appear at the right moment.

Target and Trigger

The target property of the Tooltip class allows you to bind the Tooltip to any HTML element. The trigger property lets you control when the tooltip will be rendered - by click, focus, hover or never.

Online Sample: JS Tree that Renders a Custom Tooltip on Hover

Rich API

As an instance of the MindFusion Control class the tooltip exposes a variety of useful properties for specifying its offset and position. You can also control its visibility, bounds and make it follow the mouse cursor.

Online Sample: Dom Inspector Application that Uses Custom Tooltip-s
API Overview: Tooltip Class

Custom Templates

Each Tooltip instances has a template property that lets you assign any HTML code to be rendered as a tooltip. This means you can create and style a web section after your choice and render it as a tooltip.

Online Sample: Interactive ListView with a Custom Tooltip

Styling

As one of MindFusion JavaScript controls, the Tooltip uses the appearance settings defined in the global MindFusion CSS themes. JS Pack comes with a rich theme set, which you can adjust. Another option is to use the cssClass property to assign to your Tooltip a unique styling class.

JavaScript Tooltip with Semi-transparent Background

Events

Events are raised to inform the developer when the tooltip is hidden, visible or has focus. Another set of events is raised when the tooltip is about to hide/show so you can cancel the action through the event arguments provided with the event.

Online Sample: ToolStrip with a Search Box that Renders Custom Tooltip when on Focus