View Full Version : How to make a Tooltip draggable?

17 Jun 2010, 10:57 AM
I am using a large transparent tooltip off a slider as a 'lens' on a timeline. Works pretty well except I don't know how to make the tooltip 'draggable' and remain useful as a 'lens'. Currently the user has to drag the slider's thumb.

The challenge is keeping the tip attached to the slider when it is dragged.

any ideas appreciated.


17 Jun 2010, 3:48 PM
dude that'd be sick. ANIMAL!??

17 Jun 2010, 9:19 PM
You will need to instantiate an Ext.dd.DragDrop on the ToolTip's element.

You will also need to set Constraints on it so that it can only be dragged left/right, and so that within that access, it's constrained to within the timeline Component.

18 Jun 2010, 10:30 AM
Thanks for the reply.

... and so that within that access, it's constrained to within the timeline Component.

How do you keep it constrained to the timeline component? I use setYConstraint and it jumps to the top of the page and will only travel along the top of the page. I have seen it work correctly exactly once, which makes it even more frustrating.

I'm trying to build something like FIFA.com play-by-play but in javascript and not for football.


(Hey the match is just about to start. Lets see if Rooney can end his drought.)

switch out your examples/slider/slider.js with this code to see what I mean.

var lens = Ext.extend(Ext.slider.Tip, {
init: function(slider) {
scope : this,
dragstart: this.onSlide,
drag : this.onSlide,
//dragend : this.hide,
destroy : this.destroy
draggable: {
insertProxy: false,
onDrag : function(e){
this.setYConstraint(0, 0);
endDrag : function(e){
getText: function(thumb){
return String.format('<b>{0} </b><img height="50" width="50" src="images/slider-bg.png" style="opacity:0.5"></img>', thumb.value);
} ,
onSlide : function(slider, e, thumb) {
this.el.alignTo(thumb.el, 'bl', this.offsets);

new Ext.Slider({
renderTo: 'tip-slider',
width: 214,
minValue: 0,
maxValue: 100,
plugins: new lens()

1 Jul 2010, 8:39 AM
update: The setYConstraint issue is probably not a bug however I abandoned this approach and modified the thumb instead.
http://www.putimage.com/images/37lenspic5.png (http://www.putimage.com/view.php?filename=37lenspic5.png)