Results 1 to 3 of 3

Thread: How to display tooltip for each cell item?

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    242
    Answers
    1

    Default Answered: How to display tooltip for each cell item?

    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.
    Code:
    <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
    Attached Images Attached Images

  2. Add the data-qtip attribute to the <li> instead.

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Add the data-qtip attribute to the <li> instead.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    242
    Answers
    1

    Default How to display tooltip for each cell item?

    Thanks a lot..
    It worked !!!

    -Rabi.

Posting Permissions

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