This topic introduces the Tooltips widget of the
igGrid™ and its main features.
This topic contains the following sections:
igGrid, the main purpose of tooltips is to make the entire cell content visible and also to enable the user to select and copy the text that is inside the tooltip container (very useful when the text is too long to fit in a grid cell, see the picture below). Tooltips are displayed when the user hovers the mouse pointer over
The tooltip functionality of the
igGrid is provided through the Tooltips widget. Its features are listed in the Main Features block below.
The table below briefly explains the main features of the Tooltips widget and the properties that manage them.
|Feature||Description||jQuery Property||MVC Property|
|Visibility management||Operational mode of the Tooltips widget (i.e. whether the tooltips show or not).||
|Configurable columns||Enables configuring the visibility of the tooltips on per-column basis (i.e. whether the cells of a column should display tooltips or not).||columnSettings||ColumnSettings|
|Animation timing management||Configurable show and delay times (in milliseconds) for the tooltips and duration of the animation that displays and hides them.||
|Custom positioning||Configurable tooltip position specified as an offset from the mouse pointer.||
Special events that can be handled during the lifecycle of the Tooltips widget.
There are events for every state of the tooltip:
Configures how the tooltips are styled and positioned. There are two modes: "tooltip" and "popover".
The "tooltip" style will position the tooltip according to the mouse cursor (it will display next to the mouse cursor). The tooltip content will be rendered as plain text.
The "popover" style initializes an instance of the igPopover control. It will position the tooltip according to the target TD element with an arrow pointing to it. The tooltip content will be rendered as HTML.
Appearance can be customized additionally by changing the jQuery UI CSS Framework classes.
Following are some other topics you may find useful.
View on GitHub