NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

JavaScript 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

1.
The Shawshank Redemption
1994 year
2.
The Godfather
1972 year
3.
The Godfather: Part II
1974 year
4.
The Good, the Bad and the Ugly
1966 year
5.
My Fair Lady
1964 year
6.
12 Angry Men
1957 year
  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Support of All Modern browsers
  • 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

Passengers

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

 
Film title
Year
Votes
Votes by user
1
2
3
4
5
6
The Shawshank Redemption
The Godfather
The Godfather: Part II
The Good, the Bad and the Ugly
My Fair Lady
12 Angry Men
1994
1972
1974
1966
1964
1957
678790
511495
319352
213030
533848
164558

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

1. The Shawshank Redemption
2. The Godfather
3. The Godfather: Part II
4. The Good, the Bad and the Ugly
5. My Fair Lady
6. 12 Angry Men