New to Kendo UI for jQuery? Download free 30-day trial

Show a Tooltip Only If the Text Overflows with an Ellipsis


Product Progress® Kendo UI® Tooltip for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I show a Kendo UI Tooltip only if the text of the target overflows with an ellipsis?


The following example demonstrates how to achieve the desired scenario.

        max-width: 200px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        visibility: hidden;
    <div id="example">
          <td>short text</td>
        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 =[0];
          if(element.offsetWidth < element.scrollWidth){
            return "";

See Also

In this article