Configuring Tooltips (igGrid)

Topic Overview

Purpose

This topic demonstrates, with code examples, how to configure the jQuery igGrid™ tooltips for the most common usage scenarios.

In this topic

This topic contains the following sections:

• Tooltips Configuration Chart
• Displaying the Tooltips with Their Default Settings
  • Default tooltip behavior overview
  • Default tooltip behavior property settings
  • Code example
• Disabling the Tooltips for a Column
  • Property settings
  • Code example
• Configuring a Custom Tooltip Position
  • Property settings
  • Code example
• Running sample
• Related Topics

Tooltips Configuration Chart

The table below lists the most common use cases of jQuery igGrid tooltips together with the properties that configure them. Each of these use cases is explained in greater detail in the text blocks following the table.

Displaying the Tooltips with Their Default Settings

Default tooltip behavior overview

By default, tooltips display only if the text in a cell is too long to fit in it and appears truncated. The two pictures below demonstrate this behavior:

• Left – the text is fully visible in the grid cell so no tooltip is displayed
• Right – the text is too long for the cell and appears truncated, therefore a tooltip is displayed

Default tooltip behavior property settings

The following table lists the default property settings of the jQuery Tooltip widget.

Code example

To enable the tooltips with their default settings, just set the name property to “Tooltips”.

The following code enables the default behavior of the igGrid Tooltips.

In Javascript:

$("#grid1").igGrid({
    features: [
        {
            name: "Tooltips"
        }
    ]
});

Note: For information on how to do the same with MVC, see the Adding Tooltips to an igGrid topic.

Disabling the Tooltips for a Column

In this example, the tooltips are configured to display over every column that contains text and not over the columns that store images.

The two pictures below demonstrate this behavior:

• Left – the cells in the column contain text, so the tooltips are displayed
• Right – the cells in the column contain images, so no tooltips are displayed

To configure this behavior, you need to define the properties individually for every column.

Property settings

The table below demonstrates the required property settings for hiding the tooltips for one column while always displaying the tooltips for the rest. For details about the properties, refer to the API documentation.

Code example

The following code disables the tooltips for the second column.

In Javascript:

$("#grid1").igGrid({
    features: [
        {
            name: "Tooltips",
            columnSettings: [
                { columnKey: "Name", allowTooltips: true },
                { columnKey: "BoxArt", allowTooltips: false },
                { columnKey: "Synopsis", allowTooltips: true }
            ]
        }    
    ]
});

Note: For information on how to do the same with MVC, see the Adding Tooltips to a jQuery igGrid topic.

Configuring a Custom Tooltip Position

To configure the position of the tooltip, you specify the offset of the tooltip from the mouse pointer in the jQuery igGrid Tooltip API.

Property settings

The tooltip positioning is managed by the cursorLeftOffset and cursorTopOffset properties. The table below demonstrates the required property settings for achieving the offset shown in the picture above. For details about the properties, refer to the API documentation.

Code example

The following code configures the offset shown in the picture above.

In Javascript:

$("#grid1").igGrid({    
    features: [
        {
            name: "Tooltips",
            cursorLeftOffset: 50,
            cursorTopOffset: 50          
        }    
    ]
});

Note: For information on how to do the same with MVC, see the Enable Tooltips for an igGrid topic.

Running sample

Related Topics

Following are some other topics you may find useful.

• igGrid Tooltips Overview

• Enable Tooltips for an igGrid

• igGrid Known Issues and Breaking Changes