Webix的DataTable组件,可以给内容增加Tooltip,但Header上却没办法设置Tooltip,为了解决这个问题,
可以在表格渲染完成后给表头增加Tooltip
{
view:"datatable",
autoheight:true,
autowidth:true,
tooltip: true,
columns:[
{id:"title", header:"名称", width: 450},
{id:"year", header:"上映时间"},
{id: 'votes', header: '评分人数'},
{id: 'rating', header: "评分 <span class='question-circle'></span>"}
],
url: '/film/list/1/5',
datatype: 'mydatadriver',
pager: `${uid}pager`,
on: {
onAfterRender: function () {
var columns = this.config.columns;
for (var i = 0; i < columns.length; i++) {
var column = columns[i];
var columnId = column.id;
if (columnId != 'rating') {
continue;
}
var t = webix.ui({
view: "tooltip",
template: "这是他吗的提示",
height: 100
});
var headerNode = this.getHeaderNode(columnId);
headerNode.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);
});
headerNode.addEventListener('mouseout', function (e) {
clearTimeout(this.timeout);
t.hide();
})
}
}
},
}