Tooltip UI widget

JavaScript Tooltip is a widget that can be used for displaying plain text or any HTML content when a user hovers the mouse pointer over a particular UI element. Webix Tooltip can be attached to items of data widgets, as well as any HTML element inside or outside Webix widgets.

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 or dynamic text, Webix Tooltip can display images and any HTML content. Its options allow setting the default position relative to the mouse pointer. You can change the appearance of the HTML Tooltip by adding custom CSS classes.

Easy to implement

You can add Webix tooltips for any HTML element on your page. All you have to do is define the text for its contents. Additional properties are optional and can be used for changing the appearance and positioning of the Tooltip.

Hover mouse over area

Dynamic content

You can define tooltips with dynamic content and appearance.

Tooltips for controls

Webix provides you an opportunity to add and effortlessly customize tooltips to any controls. You are free to choose between plain text tooltips and more sophisticated ones with rich content and images.

Hover mouse over the controls to see tooltips

Attaching tooltips to data widgets

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. Besides, additional tooltips can be added to Datatable headers, footers, and sparklines.

Hover mouse over data, the header, and the footer to see tooltips

Attaching tooltips to any HTML areas

You can add tooltips not only to controls and data items, but to any HTML element within a component.

Hover mouse over the data items and the "trash" icons to see tooltips