javascript - w2ui grid column title tooltip or bubble head

Question

Is there any way to put a tool tip or bubble head for the w2ui grid's column header?

I need something to put more explanation on what the column is about.

I found the following links, but they seem to be outdated and no longer relevant for w2ui v1.4 or v1.5+, or I'm just dumb enough to not make them work.

• https://github.com/vitmalina/w2ui/issues/816 : I tried doing the solution by fungms or eliavmaman but they don't seem to be working in the newer w2ui versions.
• https://github.com/vitmalina/w2ui/issues/820 : Seems outdated to me. Couldn't figure out exactly what needs to be done.

Any help or guidance is greatly appreacited.

Answer 1

列标题可能包含任何 HTML，因此这里有三种方法可以实现您想要的，或者使用：

1. 叠加层，或
2. 使用包装 DIV ，或
3. 使用内置的工具提示属性。

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" }
        ]
    });    
});

小提琴：http: //jsfiddle.net/kwpd6dm6/1/

由您来决定是否让它变得更花哨，例如将其设置为气泡或使用现有的工具提示库。