Show Tooltip for Header Titles
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Product Version | 2021.2.616 |
Description
The titles of some of my Grid headers are very long. How can I display a tooltip that contains all of the text when I hover over the headers?
Solution
The following example demonstrates how to show a Kendo UI Tooltip for the Kendo UI Grid headers.
<div id="grid"></div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
data: [
{ID:1 ,Text: "Text 1"},
{ID:2 ,Text: "Text 2"},
{ID:3 ,Text: "Text 3"}
],
schema: {
model: {
fields: {
ID: { type: "number" },
Text: { type: "string" }
}}
},
pageSize: 20
});
$("#grid").kendoGrid({
dataSource: dataSource,
scrollable: true,
filterable: true,
width: 300,
toolbar: ["create"],
columns: [
{ field: "ID", width: "50px" },
{ field: "Text", title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", width: "200px", attributes: {
style: 'white-space: nowrap '
} }],
editable: "incell"
});
$("#grid").kendoTooltip({
filter: "th", // Select the th elements of the Grid.
position: "right",
width: 250,
content: function(e){
// Return the text content of the hovered header.
return e.target.text();
}
}).data("kendoTooltip");
});
</script>