webix datatable 列头加tooltip
webix的表格，头部没有tooltip的属性支持 onmousemove只监听了数据部分，对列头没有监听。官网上演示的是在header属性上写个span 加个title的属性，但是样式不好看。然后我就直接参照写了个。用的是监听加载完成后的事件。用于加载后确定列的情况。
1、效果如下
代码如下，拷贝到html文件下直接执行科看到效果
DOCTYPE html>
<html>
<head>
<title> Loading data in the 'select' editortitle>
<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", width: 50},
{id: "title", editor: "text", header: "Film title ++++++++++++++", width: 80},
{
id: "cat_id", editor: "select", options: "data/options.json",
header: "Category", width: 110
},
{id: "votes", editor: "text", header: "Votes", width: 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 个字-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------