Tooltip UI widget

JavaScript Tooltip is a widget that can be used for displaying static text. The tooltip appears after a user hovers the mouse pointer over a particular item and can contain some additional info about this item.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Cross-browser Support (IE8+)
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Overview

Besides plain text, tooltip can display values related to a particular item of the data widget. Its options allow setting the default position relative to the mouse pointer. You can change the appearance of the HTML Tooltip by adjusting a custom CSS class, enable or disable animation, change the container width, etc.

Easy to implement

All you have to do for the Tooltip initialization is define the template that describes its content. Additional properties are optional and can be used for changing the appearance and positioning of the Tooltip.

Hover mouse over area

Settings to customize

Webix allows adjusting the Tooltip position. You can define the default position of a Tooltip relative to the mouse pointer. You can also set certain left and top offsets for a particular instance of Tooltip. The appearance can be configured as well. For example, you can apply a custom CSS class.

Hover mouse over area

Attaching to other widgets

You can bind a Tooltip to any Webix widget. For example, you can tune data components such as DataTable or Dataview to display only basic information to save space, while Tooltip will appear on hovering the mouse pointer over the items to provide users with the detailed info.

Hover mouse over data to see the tooltip