Show tooltips on Kendo Grid


Today I got an requirement to show the tooltips on each column of the grid. I was able to achieve it very easily by adding the below code but the tooltip was showing with black background. I had to invest sometime to understand the how styling for tooltip works. We can use CSS like below.

            filter: "td:nth-child(2)", //this filter selects the second column's cells
            position: "right",
            content: function (e) {
                var dataItem = $("#grid").data("kendoGrid").dataItem("tr"));
                var content = dataItem.Text;
                return content;


.k-tooltip {
            background: #ffffff !important;
            text-shadow: 0 0 black;
            color: black !important;
            box-shadow: 0 0 0 1px #ccc !important;

Hope this helps.

Happy Coding,

One thought on “Show tooltips on Kendo Grid

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s