Results 1 to 7 of 7

Thread: ExtJs ToolTip- Rendering Tooltip info like in tabular Fomat

  1. #1
    Sencha User
    Join Date
    Oct 2015
    Posts
    15

    Default ExtJs ToolTip- Rendering Tooltip info like in tabular Fomat

    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

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Greenwich, CT
    Posts
    189

    Default

    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?
    Code:
    {     
        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'
            }]
        }]
    }

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    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:
    Code:
    Ext.QuickTips.init();
    UPDATE: Should have refreshed before posting.

  4. #4
    Sencha User
    Join Date
    Oct 2015
    Posts
    15

    Default ExtJs ToolTip- Rendering Tooltip info like in tabular Fomat

    @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.

  5. #5
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Greenwich, CT
    Posts
    189

    Default

    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)?

  6. #6
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Yes, sorry for not being more clear. HTML in the regular tooltip would be rendered as text such as '<b>tooltip</b>'.

  7. #7
    Sencha User
    Join Date
    Oct 2015
    Posts
    15

    Default

    Thank you

Similar Threads

  1. Replies: 6
    Last Post: 1 Oct 2014, 9:52 AM
  2. extjs 4 rendering tooltip on grid on tabpanel
    By ShrutiRuparel in forum Ext: Q&A
    Replies: 3
    Last Post: 1 Sep 2011, 1:53 PM
  3. ExtJS 3.4 - Tooltip not rendering correctly
    By Grolubao in forum Ext 3.x: Bugs
    Replies: 2
    Last Post: 19 Jun 2011, 12:36 AM
  4. extjs tooltip to prevent default tooltip
    By wp.joju in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 1 Jul 2010, 7:43 AM
  5. Replies: 0
    Last Post: 11 Dec 2008, 6:04 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •