1. #1
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    88
    Answers
    3
    Vote Rating
    5
    whirling dervish is on a distinguished road

      0  

    Default Answered: Tooltips on column cells?

    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
    whirling dervish is on a distinguished road

      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
    8,988
    Answers
    663
    Vote Rating
    455
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      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
    whirling dervish is on a distinguished road

      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
    iplanit will become famous soon enough

      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
    67
    Answers
    5
    Vote Rating
    0
    mazhar.shaikh is on a distinguished road

      0  

    Default


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