PDA

View Full Version : [SOLVED] Tooltip relative to element position



art.home.ext
19 Mar 2010, 3:34 AM
Hi all!

Is it possible to make quicktips position relative to the element they are "tipping".

I have a panel with autoScroll:true.
I add a tip to an element standing inside this scrolling panel

When I scroll down the panel, the tip position does not change. It stays relative to document.body.

Example :
Add a <div id="div1"></div> to the examples/simple-widgets/qtips.html

Add the following JS to qtips.js



new Ext.ToolTip({
target: 'tip3',
html: 'Click the X to close me',
title: 'My Tip Title',
autoHide: false,
closable: true,
draggable:true
});
new Ext.Panel({
autoScroll:true,
title:'Test',
renderTo:'div1',
height:100,
items:[{
xtype:'box',autoEl:'div',id:'tip3',cls:'tip-target',
html:'This is a test<BR/>This is a test<BR/>This is a test<BR/>This is a test<BR/>This is a test<BR/>This is a test<BR/>This is a test<BR/>This is a test<BR/>This is a test<BR/>This is a test<BR/>This is a test<BR/>This is a test<BR/>This is a test<BR/>This is a test<BR/>This is a test<BR/>This is a test<BR/>'
}]
});

Any idea for achieving this ? I mean make the tip scroll with the target element.
Thanks in advance.

Animal
19 Mar 2010, 3:44 AM
Anchor its element to its target.

art.home.ext
19 Mar 2010, 7:15 AM
OK.

I have tried many things to make case work with anchor, without success.

Any tip on the config to be set ?

Thanks

Animal
19 Mar 2010, 7:22 AM
Anchor (http://www.extjs.com/deploy/dev/docs/?class=Ext.Element&member=anchorTo) its element to its target (http://www.extjs.com/deploy/dev/docs/?class=Ext.ToolTip&member=target).

Animal
19 Mar 2010, 7:25 AM
Or, even easier, render the ToolTip into the Panel's body. Then it would just scroll as the Panel body scrolls.

art.home.ext
19 Mar 2010, 7:51 AM
renderTo:'tip3', does the trick !

You're the best (for your last response ;) )

'cause as I said, I tried many things like

listeners:{
'render':function(t)
{
t.getEl().anchorTo(t.target,'t');
}
}
without success

foe
30 Aug 2010, 1:35 PM
renderTo:'tip3', does the trick !

Could you please be more specific about the "tip3" target, I've been trying to use renderTo on my Tooltips but if I do that then the tips loose their ability to be shown, either by the showAt() method or simply calling show()