PDA

View Full Version : Tooltip on draw canvas sprites?



Forza Bo
25 Jan 2013, 11:12 AM
I am trying to create a timeline with various sprite icons that show a tooltip when hovering. The timeline is in one panel of a viewport using the border layout.

This is how I am adding the sprites to the surface, for each item in the store:



...
var sprite = Ext.create("Ext.draw.Sprite",{
type: "image",
id: "whatsit_" + record.get("id"),
src: src,
width: 20,
height: 20,
x: x+10,
y: 90 - (yearIcons[yearIndex]*20),
group: 'markers',
listeners:
{
click : function()
{
alert("Y " + year + ": " + desc);
},
mouseover: function()
{
console.log("just to prove mouseover is working");
}

}

});

surface.add([sprite]);
...


then I create a tooltip, like this:



var tip = Ext.create('Ext.tip.ToolTip', {
target: "whatsit_" + record.get("id"),
//renderTo: Ext.getBody(),
html: 'icon number' + record.get("id")
});



Well, the tooltip doesn't work. In fact, the code for the tooltips don't even make it into the DOM, unless I uncomment the 'renderTo' -- which from what I understand isn't desired for containers with layouts.

The sprites are getting mouseover events, as shown by the mouseover and click listeners.

Any ideas what I may be doing wrong?

TIA

mitchellsimoens
28 Jan 2013, 7:46 AM
I usually use the showBy method in a mouseover event.

Forza Bo
28 Jan 2013, 8:28 AM
Thanks for the reply, Mitchell. I don't quite follow what you are suggesting, though?

The tip instance doesn't even seem to be getting created. :(

mitchellsimoens
28 Jan 2013, 10:37 AM
Any component will not be put into the DOM until you specify it to be rendered. This is why renderTo config worked as you told it to render. You can use the show* methods to show it which will force it to render.

Forza Bo
28 Jan 2013, 11:07 AM
Thank you, that was the clue I needed!