PDA

View Full Version : Help on Ext.ToolTip



v.madhu
29 Oct 2009, 5:03 AM
Hello,
I am using the class Ext.ToolTip for tooltipping for element.
I want to display the tooltip only once. After that i dont need the tooltip at all.
Can someone tell help?

Animal
29 Oct 2009, 5:08 AM
Add a hide listener which destroys it.

v.madhu
29 Oct 2009, 5:12 AM
I tried this but not working.



var t = this.tooltip;
if(!t){
t = this.tooltip = new Ext.ToolTip({
maxWidth: 600,
cls: 'errorTip',
width: 300,
title: 'Errors',
autoHide: false,
anchor: 'left',
anchorToTarget: true,
mouseOffset: [40,0],
listeners : {
hide : function(component) {
alert(3);
}
}
});
}

t.initTarget(this.btns.getEl());

v.madhu
29 Oct 2009, 5:15 AM
Add a hide listener which destroys it.
I tried the following but its not working.


var t = this.tooltip;
if(!t){
t = this.tooltip = new Ext.ToolTip({
maxWidth: 600,
cls: 'errorTip',
width: 300,
title: 'Errors',
autoHide: false,
anchor: 'left',
anchorToTarget: true,
mouseOffset: [40,0],
listeners : {
hide : function(component) {

}
}
});
}

t.initTarget(this.btns.getEl());

Animal
29 Oct 2009, 5:19 AM
"not working"?

Define what your idea of "working" is, and how the results of that differ from it?

Because that hide listener does nothing doesn't it? If you read it?

v.madhu
29 Oct 2009, 5:22 AM
"not working"?

Define what your idea of "working" is, and how the results of that differ from it?

Because that hide listener does nothing doesn't it? If you read it?

I am sorry. I donno how i missed pasting that line.


listeners : {
hide : function(component) {
component.destroy();
}
}

I tried the above code which is not working.

Animal
29 Oct 2009, 5:25 AM
So after being destroyed, it still appears?

Could be a bug. It should remove its mouseover listener from its target when it is destroyed.

v.madhu
29 Oct 2009, 5:27 AM
So after being destroyed, it still appears?


Yup. It appears

Animal
29 Oct 2009, 5:28 AM
I just tested it, and it does not show after being destroyed.

Animal
29 Oct 2009, 5:33 AM
Drop this into examples/<anywhere>



<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
tt = new Ext.ToolTip({
title: 'Once-only tooltip.',
html: 'When you mouseout of the red box, this will never appear again!',
target: 'redbox',
renderTo: document.body,
listeners: {
hide: hide: Ext.Component.prototype.destroy
}
});
});
</script>
</head>
<body>
<div id="redbox" style="background-color:red;margin-top:100px;margin-left:100px;height:100px;width:100px"></div>
</body>
</html>

v.madhu
29 Oct 2009, 5:39 AM
Thanks for your reply. It worked when i replaced the following code. Not sure why its not working with 'listeners' parameter.

t.on('hide', function() {
t.destroy();
});


Is it possible to make activate a destroied tool tip again?

Animal
29 Oct 2009, 6:37 AM
No. If you don't want it destroyed, then don't destroy it.