PDA

View Full Version : Tooltip shows while dragging an element (only IE)



Albareto
9 Nov 2012, 6:36 AM
Hi folks,

I am playing around with drag and drop, I have a viewport with a tree in the left and a panel in the right, the panel contains a chess board and I can drop nodes from the tree to the board, then that nodes that have been dropped are also draggable within the board. So far so good. The chess pieces have a tooltip, my problem is that in Internet Explorer the tooltip is showing while I am dragging. This is not happening in FF or Chrome, does someone know why is this happening?

Screenshot:

39950

I added the code (just a small html file) if you want to reproduce it yourself, just change the paths. I am using version 4.1.3

I have seen in the past while debugging something related to this that there was some code deep into the application to hide the tooltips but I am not able to find it again...

Well, any help is highly appreciated.

Cheers!

ettavolt
12 Nov 2012, 2:45 AM
The problem is event capturing by drag handlers in IE.
As workaround you may try Ext.tip.QuickTipManager.disable/enable() on drag start/end.

Albareto
12 Nov 2012, 3:00 AM
The problem is event capturing by drag handlers in IE.
As workaround you may try Ext.tip.QuickTipManager.disable/enable() on drag start/end.

Hi there, thanks for your reply. I tried it but it is not working, might be because it is not a QuickTip but a ToolTip?

This is what I tried in my Ext.dd.DragSource declaration. By the way, onEndDrag is not documented but it is fired when drag ends:



onStartDrag : function(e)
{
Ext.tip.QuickTipManager.disable();
},
onEndDrag : function()
{
Ext.tip.QuickTipManager.enable();
}

Albareto
12 Nov 2012, 3:11 AM
Ok, based on your input I took another approach, this is working for me:


var ttConfig =
{
target: 'node_' + this.id,
width: 200,
html : 'Text for : ' + data.records[0].data.text
},
tt = Ext.create('Ext.tip.ToolTip', ttConfig);
Ext.create('Ext.dd.DragSource', Ext.get('node_' + this.id).dom.id,
{
ddGroup : 'innerMatrixDD',
dragData : data,
onStartDrag : function(e)
{
Ext.destroy(tt);
},
onEndDrag : function()
{
Ext.create('Ext.tip.ToolTip', ttConfig);
}
});

It is not defenetely what I would like to code but it is working.

Thanks for your response, it lead me to the solution. If anyone has remarks on how to do it better I am more than opened to listen to them. I really don't like the code I posted.