Version

Tooltips Overview (igGrid)

Topic Overview

Purpose

This topic introduces the Tooltips widget of the igGrid™ and its main features.

In this topic

This topic contains the following sections:

Introduction

In the 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 igGrid cells.

The tooltip functionality of the igGrid is provided through the Tooltips widget. Its features are listed in the Main Features block below.

Main Features

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). visibility
style
Visibility
Style
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. showDelay
hideDelay
fadeTimespan
ShowDelay
HideDelay
FadeTimespan
Custom positioning Configurable tooltip position specified as an offset from the mouse pointer. cursorLeftOffset
cursorTopOffset
CursorLeftOffset
CursorTopOffset
Client events Special events that can be handled during the lifecycle of the Tooltips widget. There are events for every state of the tooltip:
showing
shown
hiding
hidden
tooltipShowing
tooltipShown
tooltipHiding
tooltipHidden
Appearance 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.
style Style

For the descriptions of the Tooltip widget’s properties, refer to the jQuery and MVC API documentations.

Related Topics

Following are some other topics you may find useful.

Email your feedback on this topic | View on GitHub