Results 1 to 6 of 6

Thread: Tooltips on column cells?

  1. #1
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    88
    Answers
    3
    Vote Rating
    5
      0  

    Default Answered: Tooltips on column cells?

    Is there a way to put a tooltip on columns that are not of the type of Action (http://docs.sencha.com/ext-js/4-1/#!....column.Action)?

    If not, why are tooltips limited to that one type of column?

  2. See if this will work:

    Code:
    function renderTip(val, meta, rec, rowIndex, colIndex, store) {
    	// meta.tdCls = 'cell-icon'; // icon
    	meta.tdAttr = 'data-qtip="Icon Tip"';
    	return val;
    };
    
    { dataIndex: 'type_name', header: 'Type', filter: true, renderer: renderTip },
    Regards,
    Scott.

  3. #2
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    88
    Answers
    3
    Vote Rating
    5
      0  

    Default

    I found a workable solution in this thread, http://www.sencha.com/forum/showthre...ip-to-Grid-Row.

    Code:
    function createTooltip(view) {
        view.tip = Ext.create('Ext.tip.ToolTip', {
            // The overall target element.
            target: view.el,
            // Each grid row causes its own seperate show and hide.
            delegate: view.itemSelector,
            // Moving within the row should not hide the tip.
            trackMouse: true,
            // Render immediately so that tip.body can be referenced prior to the first show.
            renderTo: Ext.getBody(),
            listeners: {
                // Change content dynamically depending on which element triggered the show.
                beforeshow: function (tip) {
                    var tooltip = view.getRecord(tip.triggerElement).get('tooltip');
                    if(tooltip){
                        tip.update(tooltip);
                    } else {
                         tip.on('show', function(){
                             Ext.defer(tip.hide, 10, tip);
                         }, tip, {single: true});
                    }
                }
            }
        });
    }
    Ext.QuickTips.init();
    
    var grid = Ext.create('Ext.grid.Panel', {
        ...
        viewConfig: {
            listeners: {
                render: createTooltip
            }
        }
        ...
    });
    Is that the best practice way to add tooltips?

  4. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,389
    Answers
    716
    Vote Rating
    497
      0  

    Default

    See if this will work:

    Code:
    function renderTip(val, meta, rec, rowIndex, colIndex, store) {
    	// meta.tdCls = 'cell-icon'; // icon
    	meta.tdAttr = 'data-qtip="Icon Tip"';
    	return val;
    };
    
    { dataIndex: 'type_name', header: 'Type', filter: true, renderer: renderTip },
    Regards,
    Scott.

  5. #4
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    88
    Answers
    3
    Vote Rating
    5
      0  

    Default

    That works great Scott and seems a lot more straight forward, thank you.

    I can get it to behave just like the other example by changing the meta.tdAttr assignment to,
    Code:
    meta.tdAttr = 'data-qtip="' + rec.data.tooltip + '"';

  6. #5
    Sencha User
    Join Date
    Aug 2012
    Location
    Dublin
    Posts
    72
    Vote Rating
    11
      0  

    Default

    Useful post, I needed to chante the style and add a tooltip and this help me using Sench Architect (the val is value, the only change in the variable names), thanks scottmartin.

    Regards

    Quote Originally Posted by scottmartin View Post
    See if this will work:

    Code:
    function renderTip(val, meta, rec, rowIndex, colIndex, store) {
        // meta.tdCls = 'cell-icon'; // icon
        meta.tdAttr = 'data-qtip="Icon Tip"';
        return val;
    };
    
    { dataIndex: 'type_name', header: 'Type', filter: true, renderer: renderTip },
    Regards,
    Scott.

  7. #6
    Sencha User
    Join Date
    Feb 2013
    Location
    NZ
    Posts
    114
    Answers
    6
    Vote Rating
    3
      0  

    Default

    How about a date column tooltip? ExtJS 4.1.3 doesnt have render config.

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
  •