[CLOSED] No tooltip when used with template

[steffenk]

Ext version tested:

Ext 3.2.1 and earlier versions


Adapter used:

ext


I first tried to add a tooltip to a Toolbar button, no problem:

{
text: 'button',
tooltip: 'show tooltip'
}

Then i used a template: no tooltip is showed:

{
text: 'button',
tooltip: 'show tooltip'
template : new Ext.Template(
'<p class="x-btn">',
'<a class="x-btn-text">{0}</a>',
'</p>').compile(),
buttonSelector : 'a:first'
}

Even direct in template it doesn't work:

{
text: 'button',
template : new Ext.Template(
'<p class="x-btn">',
'<a class="x-btn-text" ext:qtip="show tooltip">{0}</a>',
'</p>').compile(),
buttonSelector : 'a:first'
}

only a dirty workarround works:

{
text: '<span ext:qtip="show tooltip">button</span>',
template : new Ext.Template(
'<p class="x-btn">',
'<a class="x-btn-text">{0}</a>',
'</p>').compile(),
buttonSelector : 'a:first'
}

Same tested in DataView with XTemplate: render ext:qtip="..." never works, funny that using a function inside XTemplate with simple string

return 'ext:qwidth="180" ext:qtip=" ... this is the tip "';
works in DataView!

Remark: looking to generated source shows that the not working examples all have ext:qtip="..." in HTML, but it seems that the Quicktips init is before the HTML is generated, so it doesn't affect.

[evant]

The fact that you're messing with the template makes it difficult to say that it's a bug.

[Jamie Avins]

Context is going to be key, can you provide more code about this button and how you are applying the template.

[steffenk]

@evant - what do you mean with "messing"with the template?
@Jamie, the button is as it is in above example. It's in a panel bbar. Reason is that i don't want to have the normal button markup but a custom - that's what templates for, or? :)

Well, as i described i never got the qtip out of a (X)Template when having ext:qtip=... in the markup. Ok, here example that works:

mediaButtons: function() {
return new Ext.XTemplate(
'<ul id="mainMediaNavigationButtons">',
'<tpl for=".">',
'<li id="mainMediaNavigationButton-{uid}">',
'<a class="x-btn-text media-bg"',
'{[this.getToolTip(values)]}',
'>',
'{title}',
'</a>',
'</li>',
'</tpl>',
'</ul>',
{
getToolTip: function(value) {
return 'ext:qwidth="180" ext:qtip=" ... my tooltip "';
}
});
}

and this one doesn't work:


mediaButtons: function() {
return new Ext.XTemplate(
'<ul id="mainMediaNavigationButtons">',
'<tpl for=".">',
'<li id="mainMediaNavigationButton-{uid}">',
'<a class="x-btn-text media-bg"',
' ext:qwidth="180" ext:qtip=" ...my tooltip "',
'>',
'{title}',
'</a>',
'</li>',
'</tpl>',
'</ul>');
},

[evant]

Works fine for me:



Ext.onReady(function(){
Ext.QuickTips.init();
new Ext.Toolbar({
renderTo: document.body,
items: {
text: 'button',
tooltip: 'show tooltip',
template: new Ext.Template('<p class="x-btn">', '<a class="x-btn-text">{0}</a>', '</p>').compile(),
buttonSelector: 'a:first'
}
});
});

[steffenk]

ah - ok, it works with plain text, but not with html:

text: '<img src="' + TYPO3.settings.e3.iconDir + 'auf_desk_weiss.gif">'

And what is with usage in template with ext:qtip, does it work for you?

[steffenk]

And now? Above example is a clear bug in my eyes.
And with DataView i have the same feeling. i see the ext:qtip rendered in HTML but no listener is registered, so something must be buggy. Also the help forum is packed with qtip questions, though i've seen that you fixed some qtip issues in svn.

[Condor]

The tooltip on only attached to ONE element (the one pointed to by the buttonSelector).

If your text contains additional elements (like an <img>) then these will cover the original button element, so the tooltip doesn't show for these areas.

ps. There has been a discussion if QuickTips should examine parents for a qtip attribute, but it would just slowdown overall performance too much.

[steffenk]

but this is not the case ;)
If buttonSelector is a:first, the qtip should apply to this a tag, no matter which element is in the a tag. Right?

[Condor]

The tooltip is shown when the mouse is over the a tag, but not when it is over any child elements like the img tag.
To make this work QuickTip would have to search up the parent tree from the img element to find an element with a tip (the a tag). But it would have to do that for EVERY element the mouse moved over, which would make your application extremely slow.

[steffenk]

Why is this the case? With an a tag all childs behave like a link. If i set a title to the a tag, this is shown also when mouse is over a child, so i don't see why quicktip behave different.

Btw - thanks for this discussion!