kendoTooltip的使用

效果如图所示：

• 鼠标放到对应的头像图标上，会出来一个对应类型说明的气泡；

  
  
  

1. html页面，设置容器

• 在html页面中设置一个容器，用来盛放生成的表格；
• 相当于在页面上挖了个坑，然后js里写好东西之后，填到这个坑里面；

// 在html页面中设置一个容器，用来盛放生成的表格
// 相当于在挖了个坑，然后js里写好东西之后，填到这个坑里面

2. js页面，代码生成气泡

 //图标上的提示
            // 这里的id 对应的是，kendoui使用grid生成表格在html中设置的一个容器的id
           // 类似于echarts，把画完的图放到对应的容器中
            $("#accessKey_table").kendoTooltip({
                // 图标显示位置；第一列;
                filter: "td:nth-child(1)",
                // 气泡出现的位置，上下左右
                position: "top",
                content: function(e){
                    console.log("e",e);
                   // 取出每一行的数据
                    var dataItem = grid.dataItem(e.target.closest("tr"));
                   // 打印输出，查看数据格式
                    console.log("dataItem",dataItem);
                   // 这个用于绑定 气泡里面要显示的内容
                    var status = dataItem.privilegeCategory;//取到对应行数据的对应key的value值
                    return status;
                }
            });

3. 查看每一行的数据格式

4. 怎么抓取对应行的数据

var dataItem = grid.dataItem(e.target.closest("tr"));

或者：

 var row = $(this).closest("tr"),
dataItem = grid.dataItem(row);

// 等价于下：

var row = $(this).closest("tr");
var dataItem = grid.dataItem(row);