webix的表格，头部没有tooltip的属性支持 onmousemove只监听了数据部分，对列头没有监听。官网上演示的是在header属性上写个span 加个title的属性，但是样式不好看。然后我就直接参照写了个。用的是监听加载完成后的事件。用于加载后确定列的情况。
1、效果如下
代码如下，拷贝到html文件下直接执行科看到效果
<!DOCTYPE html> <html> <head> <title> Loading data in the 'select' editor</title> <link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css" media="screen" charset="utf-8"> <script src="http://cdn.webix.com/edge/webix.js" type="text/javascript" charset="utf-8"></script> </head> <body> <script type="text/javascript" charset="utf-8"> webix.ready(function () { webix.ui({ view: "datatable", on: { onAfterRender: function () { var columns = this.config.columns; for (var i = 0; i < columns.length; i++) { var t = webix.ui({ view: "tooltip", template: "#value#", height: 100 }) this.getHeaderNode(columns[i].id).addEventListener('mousemove', function (e) { t.hide(); clearTimeout(this.timeout); t.value = this.firstChild.textContent; this.timeout = setTimeout(function (value) { t.show({value: t.value}, {x: e.clientX + 3, y: e.clientY}) }, 500); }); this.getHeaderNode(columns[i].id).addEventListener('mouseout', function (e) { clearTimeout(this.timeout); t.hide(); }) } } }, tooltip: true, type: "editIcon", columns: [ {id: "rank", editor: "text", header: "", css: "rank", 50}, {id: "title", editor: "text", header: "Film title ++++++++++++++", 80}, { id: "cat_id", editor: "select", options: "data/options.json", header: "Category", 110 }, {id: "votes", editor: "text", header: "Votes", 100} ], data: [ {id: 1, title: "The Shawshank Redemption", cat_id: "1", votes: 678790, rating: 9.2, rank: 1}, {id: 2, title: "The Godfather", cat_id: "2", votes: 511495, rating: 9.2, rank: 2} ] }); }); </script> </body> </html>
红色部分为列头tooltip的代码
凑150 个字-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------