Show a Tooltip Only If the Text Overflows with an Ellipsis
Environment
| Product | Progress® Kendo UI® Tooltip for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I show a Kendo UI Tooltip only if the text of the target overflows with an ellipsis?
Solution
The following example demonstrates how to achieve the desired scenario.
<style>
td{
max-width: 200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
[role="tooltip"]{
visibility: hidden;
}
</style>
<div id="example">
<table>
<tr>
<td>short text</td>
</tr>
<tr>
<td>veryverylongtextthatdoesnotfitinthecontainer</td>
</tr>
</table>
</div>
<script>
$("#example").kendoTooltip({
filter: "td",
show: function(e){
if(this.content.text() !=""){
$('[role="tooltip"]').css("visibility", "visible");
}
},
hide: function(){
$('[role="tooltip"]').css("visibility", "hidden");
},
content: function(e){
var element = e.target[0];
if(element.offsetWidth < element.scrollWidth){
return e.target.text();
}else{
return "";
}
}
})
</script>