Question

I want to add tooltip to my gridpanel's data. I want to put map on tooltip panel, I got it, but my static map's width is 600px, it overflows from tooltip's panel. I used below code, it works fine, but can not set a width to tooltip. How can I do?

this.renderToolTip = function(argVal, metadata, record, rowIndex, colIndex, store)
{
    var toolTipImg = '<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:green%7C' + record.data.latitude + ',' + record.data.longtitude + '&zoom=15&size=600x200&sensor=false" />';
    var title = record.data.title;

    return '<div ext:qtitle="' + title + '" ext:qtip="' + toolTipImg + '">' + argVal + '</div>';
};
Was it helpful?

Solution

Try this:

...

ext:qwidth="100"

...

OTHER TIPS

for ExtJs4, here is the attributes:

 tagConfig : {
        namespace : "data-",
        attribute : "qtip",
        width : "qwidth",
        target : "target",
        title : "qtitle",
        hide : "hide",
        cls : "qclass",
        align : "qalign",
        anchor : "anchor"
    },

do not forget to call :

Ext.tip.QuickTipManager.init();

in the begenning of your code.

Example of use:

meta.tdAttr = "data-qtip='texttttt' data-qtitle='title' data-qwidth=140"; 

m.tdAttr = 'data-qwidth="160" data-qtip="'

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top