Show Only If Text Exceeds Certain Length

The example below demonstrates how to show a Kendo UI Tooltip only if the text of the target exceeds a certain length.

    <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

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.

In this article
Not finding the help you need? Improve this article