w2ui 网格列标题工具提示或泡泡头

Question

有没有办法为 w2ui 网格的列添加工具提示或气泡头 header？

我需要一些东西来对专栏的内容进行更多解释。

我找到了以下链接，但它们似乎已经过时并且不再与 w2ui v1.4 或 v1.5+ 相关，或者我太笨了以至于无法使用它们。

https://github.com/vitmalina/w2ui/issues/816：我尝试通过 fungms 或 eliavmaman 解决问题，但它们似乎无法在较新的 w2ui 版本中使用。
https://github.com/vitmalina/w2ui/issues/820 ：对我来说似乎已经过时了。无法弄清楚到底需要做什么。

非常感谢任何帮助或指导。

Answer 1

列标题可以包含任何 HTML，所以这里有三种方法可以实现您想要的效果，其中一种是：

叠加层，或
使用包装 DIV 或
使用 built-in 工具提示属性。

CSS（仅当您选择叠加尝试时才需要）：

.tt{
   position: absolute !important;top: 0 !important;right: 0 !important;bottom: 0 !important;left: 0 !important;
}

JS:

var c1 = 'First Name' + '<i class="tt" title="Your Tooltip text"></i>';
var c2 = '<div title="This is a tooltip ...">Last Name</div>';

$(function () {
    $('#grid').w2grid({ 
        name: 'grid', 
        columns: [                
            { field: 'fname', caption: c1, size: '30%' },
            { field: 'lname', caption: c2, size: '30%' },
            { field: 'email', caption: 'Email', size: '40%', tooltip: "Hello World" }
        ]
    });    
});

fiddle: http://jsfiddle.net/kwpd6dm6/1/

你可以把它做得更花哨，例如通过将其样式设置为气泡或使用现有的工具提示库。

w2ui 网格列标题工具提示或泡泡头

w2ui grid column title tooltip or bubble head

javascript

w2ui