jQuery kendo 网格如何为图标编辑、更新、取消、删除添加工具提示

Question

下面给出的工作代码link

我尝试使用标题字段，但鼠标悬停不显示。

<!DOCTYPE html>
<html>
  <head>
<title>Kendo UI Grid Icon Buttons</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.default.min.css" />

<script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
<style>
  
  .k-grid .k-grid-toolbar .k-grid-add,
  .k-grid tbody .k-grid-edit,
  .k-grid tbody .k-grid-update,
  .k-grid tbody .k-grid-cancel,
  .k-grid tbody .k-grid-delete {
    min-width: 0;
  }
  
  .k-grid .k-grid-toolbar .k-grid-add .k-icon,
  .k-grid tbody .k-grid-edit .k-icon,
  .k-grid tbody .k-grid-update .k-icon,
  .k-grid tbody .k-grid-cancel .k-icon,
  .k-grid tbody .k-grid-delete .k-icon {
    margin: 0;
  }
  
</style>
  </head>
  <body>
    <div id="example">
      <div id="grid"></div>

      <script>
    $(document).ready(function () {
      var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
          dataSource = new kendo.data.DataSource({
            transport: {
              read:  {
                url: crudServiceBaseUrl + "/Products",
                dataType: "jsonp"
              },
              update: {
                url: crudServiceBaseUrl + "/Products/Update",
                dataType: "jsonp"
              },
              destroy: {
                url: crudServiceBaseUrl + "/Products/Destroy",
                dataType: "jsonp"
              },
              create: {
                url: crudServiceBaseUrl + "/Products/Create",
                dataType: "jsonp"
              },
              parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                  return {models: kendo.stringify(options.models)};
                }
              }
            },
            batch: true,
            pageSize: 10,
            schema: {
              model: {
                id: "ProductID",
                fields: {
                  ProductID: { editable: false, nullable: true },
                  ProductName: { validation: { required: true } }
                }
              }
            }
          });

      $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 500,
        toolbar: [{name: "create", text: " "}],
        columns: [
          { field: "ProductName" },
          { command: [
            {name: "edit", text: { edit: " ", update: " ", cancel: " " }},
            { name: "destroy", text: " "}
          ], title: "Action", width: "250px" }
        ],
        editable: "inline"
      });
    });

  </script>
</div>

  </body>
</html>

添加了工具提示字段并进行了尝试，但我没有在鼠标悬停时获得工具提示。我需要工具提示显示在每个图标的鼠标上，在操作列中工具提示：-“编辑”、“更新”、“取消”、“删除”

Answer 1

一种方法是为按钮的 class.

创建一个 Kendo ToolTip for each button and point the filter 属性

Specifies a selector for the elements within the container which will display the Tooltip.

例如，要在每个编辑按钮上显示工具提示，您可以这样做：

$("#grid").kendoTooltip({
    filter: ".k-grid-edit",
    content: function (e) {
        return "edit";
    }
});

这里是一个 dojo，下面是完整的例子：

<div id="grid"></div>

<script>
    function hideKendoToolTips() {
      $(".k-tooltip").hide(); 
    }
    
    $(document).ready(function () {
      var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
          dataSource = new kendo.data.DataSource({
            transport: {
              read:  {
                url: crudServiceBaseUrl + "/Products",
                dataType: "jsonp"
              },
              update: {
                url: crudServiceBaseUrl + "/Products/Update",
                dataType: "jsonp"
              },
              destroy: {
                url: crudServiceBaseUrl + "/Products/Destroy",
                dataType: "jsonp"
              },
              create: {
                url: crudServiceBaseUrl + "/Products/Create",
                dataType: "jsonp"
              },
              parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                  return {models: kendo.stringify(options.models)};
                }
              }
            },
            batch: true,
            pageSize: 10,
            schema: {
              model: {
                id: "ProductID",
                fields: {
                  ProductID: { editable: false, nullable: true },
                  ProductName: { validation: { required: true } }
                }
              }
            }
          });

      $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 500,
        toolbar: [{name: "create", text: " "}],
        columns: [
          { field: "ProductName" },
          { command: [
            {name: "edit", text: { edit: " ", update: " ", cancel: " " }},
            { name: "destroy", text: " "}
          ], title: "&nbsp;", width: "250px" }
        ],
        editable: "inline",
        beforeEdit: hideKendoToolTips,
        cancel: hideKendoToolTips,
        save: hideKendoToolTips
      });
      
      $("#grid").kendoTooltip({
        filter: ".k-grid-edit",
        content: function(e){
          return "edit";
        }
      });
      $("#grid").kendoTooltip({
        filter: ".k-grid-delete",
        content: function(e){
          return "delete";
        }
      });
      $("#grid").kendoTooltip({
        filter: ".k-grid-update",
        content: function(e) {
          return "update";
        }
      });
      $("#grid").kendoTooltip({
        filter: ".k-grid-cancel",
        content: function(e){
          return "cancel";
        }
      });
    });
</script>

您会注意到我添加了函数 hideKendoToolTips，它在网格的 beforeEdit、cancel 和 save 事件期间被调用。如果没有这个功能，点击编辑、更新或取消按钮后，工具提示不会自动隐藏。我认为它与按钮有关，工具提示被分配到，当您单击它时被删除。不管怎样，这个功能只是为了在你点击按钮后隐藏工具提示。

Answer 2

使用grid的dataBound事件给按钮添加标题，例如：

$("#grid").kendoGrid({
    dataSource: dataSource,
    dataBound: function () {
         $(".k-grid-edit").attr("title", "Edit this record");
    },
...

jQuery kendo 网格如何为图标编辑、更新、取消、删除添加工具提示

jQuery kendo grid how to add tooltip for icons edit, update, cancel, delete

jquery

kendo-grid