Edit this page

Show Only If Text Overflows with Ellipsis

The example below demonstrates how to show a Kendo UI Tooltip only if the text of the target overflows with ellipsis.

        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 = e.target[0];
          if(element.offsetWidth < element.scrollWidth){
            return e.target.text();
            return "";

See Also

Other articles and how-to examples on the Kendo UI Tooltip:

For more runnable examples on the Kendo UI Tooltip, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article