PDA

View Full Version : How to display tooltip for each cell item?



ypandey
16 Mar 2012, 12:44 AM
Hi All,


We are using Ext Js grid componenent. We have used renderer to show multiple list items in cell.
We have a requirement to show Tooltip for each list item in the cell.
How can we achieve that??
For cell we are able to display the tooltip but we want to show tooltip for each items in cell.

For Example:

We have Grid with one column "Application Group".
Application Group can have values like: "Email", "Stoarage".
With the help of renderer we can disaply both Email and Stoage as part of <li> element in cell.
Our requirement is to show tooltip on mouseover of individual cell items.
When user mouse over to Email it should show tooltip with (POP3, SMTP)
When user mouse over to Storage it should show tooltip with (Oracle, MySql)

With the help of following code able to display tooltip for the cell. But we want tooltip for each cell item.


<html>
<head><title>ExtJs Grid</title>
<link rel="stylesheet" type="text/css" href="../../css/resources/css/ext-all.css">
<script type="text/javascript" src="../../js/extJS/ext-all-debug.js"></script>


<script type="text/javascript">
Ext.QuickTips.init();
Ext.onReady(function(){
var store = new Ext.data.Store({
fields: [{name: 'application'}],
data: [
{"application": [
{label:"Email", countrylist:[{label:"POP3", icon:"pop.png"},{label:"SMTP", icon:"smtp.png"}]},
{label:"Storage", countrylist:[{label:"Oracle", icon:"or.png"},{label:"MySQL", icon:"sql.png"}]}
]
},
{"application": [
{label:"Social Networking", countrylist:[{label:"FB", icon:"fb.png"},{label:"GPlus", icon:"gplus.png"}]}
]
}
]
});


var renderFun= function(value,metaData) {


var returnHtml = '<div><ul>';
for(var i=0; i < value.length; i++) {
returnHtml = returnHtml + '<li>' + value[i].label+ '</li>';
}
returnHtml = returnHtml + '</ul></div>';
metaData.tdAttr = 'data-qtip="' + returnHtml + '"';
return returnHtml;
};


// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "Application Group", flex:1, dataIndex: 'application',renderer: renderFun},
],
stripeRows: true,
height:105,
width:150,
renderTo: Ext.getBody()
});


});

</script>
</head>
</html>





Attached png image shows tooltip for each cell items(Coded in swing). We want to achieve similar with the help of Ext JS.


Thanks
Rab

mitchellsimoens
16 Mar 2012, 11:34 AM
Add the data-qtip attribute to the <li> instead.

ypandey
16 Mar 2012, 8:19 PM
Thanks a lot..
It worked !!!

-Rabi.