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.

score 1 · Accepted Answer · edited Oct 26 '17 at 19:53

1

The column caption may contain any HTML, so here are three ways to achieve what you want, either with:

an overlay, or
using a wrapping DIV , or
using the built-in tooltip property.

CSS (only needed if you choose the overlay attempt):

.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/

It is up to you to make this more fancy, e.g. by styling it as a bubble or use an existing tooltip lib.

edited Oct 26 '17 at 19:53

cantbreatheonleft

35
5

answered Oct 26 '17 at 07:45

Mike Scotty

10,530
5
38
50

Your first method looks like eliavmaman's suggestion. I guess I just had no idea how/where to implement it. By the way, when you said I can make the tooltip fancier by styling it as a bubble, are you referring to your 1st or 2nd method? And when you said use an existing tooltip lib, are you referring to the 3rd method? I can't seem to find it in the http://w2ui.com/web/docs or http://w2ui.com/web/demos – cantbreatheonleft Oct 26 '17 at 19:42
Oh, I found these stuff https://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632 for the styling. I think these are what you were referring are they? – cantbreatheonleft Oct 26 '17 at 20:00
My first method is indeed inspired by eliavmaman's post. As for the stylin, yes, you can use one of the libraries linked in the url you posted, or use a [w2tag](http://w2ui.com/web/demos/#!utils/utils-4). My personal favorite for this task would probably be [qtip2](http://qtip2.com/demos), but recommending/suggesting off-line resources is not really part of answering a StackOverflow topic. Feel free to accept the answer and/or upvote, if it answers your question and solves your problem. – Mike Scotty Oct 26 '17 at 20:18

w2ui grid column title tooltip or bubble head

1 Answers1