PDA

View Full Version : [CLOSED] No tooltip when used with template



steffenk
18 May 2010, 8:46 AM
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
18 May 2010, 8:51 AM
The fact that you're messing with the template makes it difficult to say that it's a bug.

Jamie Avins
18 May 2010, 8:59 AM
Context is going to be key, can you provide more code about this button and how you are applying the template.

steffenk
18 May 2010, 9:11 AM
@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
19 May 2010, 5:08 AM
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
19 May 2010, 10:36 AM
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
21 May 2010, 3:44 AM
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
21 May 2010, 4:10 AM
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
21 May 2010, 8:26 AM
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
21 May 2010, 8:38 AM
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
21 May 2010, 9:21 AM
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!