PDA

View Full Version : ExtJs ToolTip- Rendering Tooltip info like in tabular Fomat



2mailpks
17 May 2016, 10:05 PM
I have Grid Column header Designed like Following


{ xtype :'gridpanel', columns :[{ xtype : 'actioncolumn', header: '<img src="images/header.png" />', tooltip:'Praveen' width : 40, items : [{ icon : 'images/ignition_on.png', tooltip : 'Ignition On' }] }]}

As far as i read , ExtJS Grid Headers tooltip supports only string,But i wanted to Display tooltip in tabular format


{ xtype :'gridpanel', columns :[{ xtype : 'actioncolumn', header: '<img src="images/header.png" />', tooltip:'<table style='color:RED;font-weight: bold;'><tr><td>Total Number of Unique Values:</td><td>3</td></tr><tr><td>Male</td><td>200</td></tr><tr><td>Female</td><td>342</td></tr><tr><td>Others</td><td>152</td></tr></table>'
width : 40, items : [{ icon : 'images/ignition_on.png', tooltip : 'Ignition On' }] }]}
The Main agenda of my tooltip is i want to display a grid column and values in columns,While user mouseover on tooltip i want to show the user

<table style='color:RED;font-weight: bold;'>
<tr>
<td>Total Number of Unique Values:</td>
<td>3</td>
</tr>
<tr>
<td>Male</td>
<td>200</td>
</tr>
<tr>
<td>Female</td>
<td>342</td>
</tr>
<tr>
<td>Others</td>
<td>152</td>
</tr>
</table>

Total No of Unique Values:3
Male :200 Records
Female:100 Records
Others :10 Records

Is there any way i can achieve this in tooltip , if not possible how to achieve this?

Thanks in Advance,
Praveen

prophet
18 May 2016, 5:59 AM
This should work in Ext 3.x natively, if your string is properly escaped.
I see that you have some unescaped quotes that may be causing your problem?

{
xtype :'gridpanel',
columns :[{
xtype : 'actioncolumn',
header: '<img src="images/header.png" />',
tooltip:'<table style=\'color:RED;font-weight: bold;\'><tr><td>Total Number of Unique Values:</td><td>3</td></tr><tr><td>Male</td><td>200</td></tr><tr><td>Female</td><td>342</td></tr><tr><td>Others</td><td>152</td></tr></table>',
width : 40,
items : [{
icon : 'images/ignition_on.png',
tooltip : 'Ignition On'
}]
}]
}

Gary Schlosberg
18 May 2016, 6:21 AM
The tooltips option doesn't allow for use of HTML, but you should be able to do this with a quicktip. Try throwing this in before your grid code:


Ext.QuickTips.init();


UPDATE: Should have refreshed before posting.

2mailpks
18 May 2016, 6:23 AM
@prophet


The Way U suggested and i have tried is escaping the html tags inside that tooltip
for ex:'<table><tr><td>John</td></tr><tr><td>John</td></tr><tr><td>John</td></tr>'

its showing in tooltip as "JohnJohn"

Whats the Solution for this?

In the Version Ext 4.x and all its working perfect the way we intended.i.e its displying table

Thanks,
Praveen.

prophet
18 May 2016, 7:47 AM
Sorry, I assumed that you were already using QuickTips. Try what Gary said.

@Gary-Schlosberg Without QuickTips initialized, wouldn't it just "render" the HTML as a regular browser tooltip (showing the actual HTML code)?

Gary Schlosberg
19 May 2016, 2:05 PM
Yes, sorry for not being more clear. HTML in the regular tooltip would be rendered as text such as '<b>tooltip</b>'.

2mailpks
23 May 2016, 9:08 PM
Thank you