I am trying to add a on click listener to the below tooltip. I do not want the tooltip to display on mouse hover. Instead it need it show on button click. Do I have to add a handler function inside a listener?
{
xtype: 'button',
cls:'my-btn',
iconCls:'question',
src:'../www/css/slate/btn/question.png',
padding: '5 0 0 0',
listeners: {
render: function(cmp) {
Ext.create('Ext.tip.ToolTip', {
closable:true,
hideDelay : 3000,
padding: '0 0 0 0',
maxWidth:400,
width:800,
target: cmp.el,
html: "<b>read-only</b>:Users will have read only access to all pages",
getTargetXY: function() {
return [810, 340];
}
});
}
}
},
I am trying to add a on click listener to the below tooltip. I do not want the tooltip to display on mouse hover. Instead it need it show on button click. Do I have to add a handler function inside a listener?
{
xtype: 'button',
cls:'my-btn',
iconCls:'question',
src:'../www/css/slate/btn/question.png',
padding: '5 0 0 0',
listeners: {
render: function(cmp) {
Ext.create('Ext.tip.ToolTip', {
closable:true,
hideDelay : 3000,
padding: '0 0 0 0',
maxWidth:400,
width:800,
target: cmp.el,
html: "<b>read-only</b>:Users will have read only access to all pages",
getTargetXY: function() {
return [810, 340];
}
});
}
}
},
1 Answer
Reset to default 9Yes, on click you can show the tooltip programmatically, skip the target and add a showAt():
...
listeners: {
click: function(cmp) {
Ext.create('Ext.tip.ToolTip', {
closable:true,
hideDelay : 3000,
padding: '0 0 0 0',
maxWidth:400,
width:800,
html: "<b>read-only</b>:Users will have read only access to all pages",
}).showAt([810, 340]);
}
}
If you don't need the automatic hiding (your tooltip is closable anyway) you can make it just an Ext.tip.Tip:
Ext.create('Ext.tip.Tip', {
closable:true,
padding: '0 0 0 0',
maxWidth:400,
width:800,
html: "<b>read-only</b>:Users will have read only access to all pages",
}).showAt([810, 340]);