PDA

View Full Version : Ext JS 4 - How to Hide ToolTip on MouseOut of target and tooltip box ?



cpsarathe
20 Nov 2014, 2:41 AM
Hi ,

I am using Ext JS 4.2 and using 'ToolTip' class to create new tooltip , In my project I want to assign tooltip to particular column of grid and in that column I am rendering custom HTML, so same css class can be present at more than one place.

Issue I am facing is on mouse out of custom HTML tooltip is not hidden , similarly on mouse out of tooltip area tooltip box is not hidden. Please help.

Below is the sample code , I have created , please mouseover on phone -



var myAppStore = Ext.create('Ext.data.Store',
{
autoLoad: true,
storeId: 'myappstore',
fields: ['name', 'email', 'phone'],
proxy: {
type: 'memory',
data: {
"items": [
{
'name': 'LisaABCDefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
"email": "[email protected]",
"phone": "555-111-1224",
"Address":'true',
}, {
'name': 'Bart',
"email": "[email protected]",
"phone": "555-222-1234",
"Address":'true',
}, {
'name': 'Homer',
"email": "ho[email protected]",
"phone": "555-222-1244",
"Address":'true',
}, {
'name': 'Marge',
"email": "[email protected]",
"phone": "555-222-1254",
"Address":'true',
}
]
},
reader: {
type: 'json',
root: 'items'
}
}
});
var panel = Ext.create('Ext.grid.Panel',{
store: myAppStore,
renderTo: Ext.get('myPanel'),
columns: [{
text: 'Name',
dataIndex: 'name',
menuDisabled : true,
flex:1,
} ,{
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone',
renderer : function(value, meta, record, rowIndex, colIndex){
return this.phoneTpl.apply({
value : value
});
}

},
{
header: 'Email',
dataIndex: 'email',
flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
},
renderer : function(value, meta, record, rowIndex, colIndex) {
var store = Ext.getStore('MyAppStore');
var record = store.getAt(rowIndex);
var newValue = record.get('name') + ',' + record.get('phone');
return newValue;
}
},
],
phoneTpl: new Ext.XTemplate(
'<div class="dummyclass" style="text-align:center;">{value}</div>'
),
listeners: {
render : function(view,op) {
console.log('onGridRender');
view.tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: '.dummyclass div',
title: 'Here Comes Title',
autoHide : true,
showDelay: 750,
hideDelay: 60000,
dismissDelay: 0,
minWidth: 150,
mouseOffset: [-10, -10],
anchorOffset: 110,
closable : true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
tip.update('Content will come here');
},
}
});
}
},
});
panel.show();

slemmon
21 Nov 2014, 3:27 PM
Hi,

Will the tip title / message (body) be something other than what you have access to in the record? If so I might have a simpler solution to share.

cpsarathe
22 Nov 2014, 12:03 AM
Hi,



Will the tip title / message (body) be something other than what you have access to in the record?


Yes, I will update tip content dynamically

tip.update(content);

Please suggest.

slemmon
24 Nov 2014, 10:40 AM
Sorry, what I meant to ask is will the content of the tip come from a value in the record?

cpsarathe
24 Nov 2014, 9:58 PM
No , not from record . It's all together different set of data that I have to show on tooltip.
So , data i am going to show in tooltip will not be present in record or in store.

slemmon
25 Nov 2014, 1:15 PM
In the column renderer you can set a class on the cell element and then have the tooltip delegate to that selector like in the following example:

e0s

cpsarathe
25 Nov 2014, 9:39 PM
https://fiddle.sencha.com/#fiddle/e1l

Thanks for the code.
I am looking for following things to work for me -
1. on Mouse over of cell tooltip is displayed.
yes, I can display.

2.When tooltip is displayed , it shows dynamic content [dynamic html].
Yes, it is showing.

3.When tooltip is displayed , user can take mouse in tooltip content and click on delete button / link inside it.
I am unable to do that.

4.When user mouse out from the cell , tooltip should be hidden.
I am unable to do that

5.When user mouse out from the tooltip, tooltip should be hidden.
I am unable to do that

slemmon
26 Nov 2014, 12:22 PM
Hi,

Try with the following edits.

autoHide: false
trackMouse: false (default)
set a mouseover listener on the grid view and hide the tooltip if the mouseover was not over an element with the .price class selector
after the tip is rendered set a mouseleave listener on its element to hide it on mouseleave

e3m

cpsarathe
28 Nov 2014, 2:40 AM
Thanks , It helps.

I am still facing problem as the scope is widen now -

on mouse over of say price and change I want to display tooltip.

so I am using 'delegate' like this.


Ext.getBody().on('mouseover', function(event, target){
//creating same tooltip object as given in sencha fiddle.
}, null, {
delegate: '.price'
});



Ext.getBody().on('mouseover', function(event, target){
//creating same tooltip object as given in sencha fiddle.
}, null, {
delegate: '.change'
});

So every time I mouseover tooltip appears but I have to push close button many times for closing tooltip.

It seems tooltip appears many times.

https://fiddle.sencha.com/#fiddle/e60

slemmon
1 Dec 2014, 1:13 PM
In the event handler you can set the scope to whatever you'd like. Here is a fork of my previous fiddle where I'm setting the scope of the beforeshow event handler to the grid instead of the tooltip instance.

e9f

cpsarathe
1 Dec 2014, 9:33 PM
Thanks Slemmon for your help.
May be I couldn't able to describe what I was needed.

https://fiddle.sencha.com/#fiddle/e60

In this fiddle I am creating tooltip on mouseover of 'price' and 'change' , so whenever I mouse over of 'price' I display dynamic content and similarly dynamic content is displayed for on mouseover of 'change'.

In above fiddle I was using 'delegate' to create tool tip , and due to that following issue comes -
1. Every mouseover of 'price' and 'change' create many tooltip instances.

What I am looking for is some way -
- to create only one tooltip instance.
- to update content dynamically on mouseover of 'price' and 'change'
- to hide tooltip on click of close button.

And earlier functionality should be supported -

1.When tooltip is displayed , user can take mouse in tooltip content and click on delete button / link inside it.
2.When user mouse out from the cell , tooltip should be hidden.
3.When user mouse out from the tooltip, tooltip should be hidden.