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

Show a Tooltip Only If the Text Exceeds a Certain Length


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 exceeds a certain length?


The following example demonstrates how to achieve the desired scenario.

    <div id="content" style="width: 500px">
      <div id="grid"></div>

        visibility: hidden;

    <script src=""></script>
      $(document).ready(function () {
        var dataSource = new{
          data: products,
          schema: {
            model: {
              fields: {
                ProductName: { type: "string" },
                UnitPrice: { type: "number" },
                UnitsInStock: { type: "number" },
                Discontinued: { type: "boolean" }
          pageSize: 20

        var grid = $("#grid").kendoGrid({
          dataSource: dataSource,
          pageable: true,
          height: 500,
          toolbar: ["create"],
          columns: [
            { field: "ProductName", title: "Product Name", width: "100px" },
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" }
          editable: "incell",

          show: function(e){
            if(this.content.text().length > 40){
              this.content.parent().css("visibility", "visible");
            this.content.parent().css("visibility", "hidden");
          filter: "td:nth-child(1)", //this filter selects the first column cells
          position: "center",
          content: function(e){
            var dataItem = $("#grid").data("kendoGrid").dataItem("tr"));
            var content = "Currently we have " + dataItem.UnitsInStock + "  " + dataItem.ProductName +"in stock";
            return content;

See Also

In this article