Results 1 to 3 of 3

Thread: Can tooltips work inside a grid panel?

  1. #1
    Sencha User
    Join Date
    Jan 2010
    Vote Rating

    Default Can tooltips work inside a grid panel?

    I have a grid panel inside a tab panel. I'm trying to get a tooltip to work inside the grid cells. It works outside of the panels. If I just use a qtip inside the grid cell it works. I cannot get the tooltip to work inside a grid cell. Is this possible?

    I started with this example as a guide.

    Here is the beginning of my code. In the function, where val=akefh1, is where I'm trying to get the tooltip to work. The second part, val=hapcok1, works fine with the qtips.

    Ext.BLANK_IMAGE_URL = '../../EXT_JS/resources/images/default/images/s.gif';
    // example of custom renderer function
       function change(val){
           if (val == 'akefh1'){
               return '<div id="tip2" class="tip-target"><img src="../../images/warning.gif"/></div>';
           }else if (val == 'hapcok1'){
                   return "<img src='../../images/warning.gif' ext:hide:'user' ext:qtip='This is HAPCOK1 warning'/>";
           return "<img src='../../images/warning.gif' qtip='generic warning'/>";
        var columnRows = new Array;
        columnRows = [
                        {header: "Stock", dataIndex: 'Stock', width: 400, sortable: true, id:'title'},
                        {header: "FMP", dataIndex: 'fmp', hidden:true, groupName:'FMP'},
                        {header: "Data Quality", dataIndex: 'DataQuality', width: 75,sortable: false},    
                        {header: "Data Caveats", dataIndex: 'DataCaveat', renderer: change, width: 100, sortable: false},
                        {header: "Date Published", dataIndex: 'DatePub', renderer: Ext.util.Format.dateRenderer('m/d/Y'), width: 100,sortable: true},
                        {header: "Link To EFH Text", dataIndex: 'LinkToSrce', width: 100, sortable: false} 
    Then there is a bunch of code that builds the tabpanels and gridpanels:

    var tabCode = new Ext.TabPanel({
                    activeTab: 0,
                    renderTo: 'tabPanelContainer',
                    height: 500,
                    items: [{
                        title: 'Alaska',
                        id: 'AK',
                        xtype: 'tabpanel',
                        activeTab: 0,
                        items: [{
                            title: 'EFH',
                            xtype: 'grid',
                            stripeRows: true,
                            store: get_akefh(),
                            columns: columnRows,
                            view: groupViewSpecies
    Then it all gets displayed in a div:

            <div id='tip2' class='tip-target'><img src='../../images/warning.gif'/></div>
            <div id="tabPanelContainer"></div>
    The first div is just to prove that I can get the tooltip to work outside of the panels.

  2. #2
    Ext JS Premium Member cnelissen's Avatar
    Join Date
    Sep 2007
    Vote Rating


    You would have to change the selection model of the grid from a row selection model to a cell selection model... Otherwise the mouseover event is going to be captured by the row container instead of the individual cell. The cell might still capture the event before it hits your div though, since its nested.

    You could try setting trackMouseOver: false on your grid to see if that shows the qtip.
    - Clint Nelissen

  3. #3

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