Showing a Tooltip for Column Records

Environment

Product	Telerik UI for ASP.NET Core Grid
Operating System	All
Browser	All
Browser Version	All

Description

How can I show a Tooltip for the Telerik UI Grid for ASP.NET Core?

Solution

• Initialize the Tooltip for the Grid.

   @(Html.Kendo().Tooltip()
        .For("#grid")
        .Position(TooltipPosition.Right)
        .Width(250)
    )

• Specify a selector for elements, which the Tooltip will display within the grid, through the Filter configuration method.

    .Filter("td:nth-child(3), th:nth-child(3)")

• Provide a content handler for the Tooltip by using the ContentHandler configuration method.

    .ContentHandler("contentHandler")

    function contentHandler(e) {
        // If the element is the header, return the text of the cell.
        if (e.target.is("th")) {
            return e.target.text();
        }

        var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
        var content = dataItem.QuantityPerUnit;
        return content;
    }

For more information on how to implement the suggested approach, refer to the following Telerik REPL example.

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Showing a Tooltip for Column Records
• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base