Tooltip help for dataview

[rrandymeyer]

I am trying to implement tooltips on my navigation panel without much luck. I am trying to understand the tooltip implementation better as I have to apply a tool tip to most of the components in my UI. Here is my first shot in this panel:

/**
 * @class SI.view.ActionPanel
 * @extends Ext.panel.Panel
 *
 * Shows a list of available actions.
 *
 * @constructor
 * Create a new Actions Panel
 * @param {Object} config The config object
 */

Ext.require('SI.lib.Tools');

Ext.define('SI.view.ActionPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.ActionPanel',
    animCollapse: false,
    layout: 'fit',
    title: 'Actions',
    collapsible: true,
    collapsed: false,
    width: 200,
    floatable: false,
    split: true,
    minWidth: 175,
    items: [{
        xtype: 'dataview',
        store: {
            fields: ['title', 'name'],
            data: [{
                title: 'Action One', 
                name: 'ActionOne',
                tooltip: 'tooltip for action 1 goes here....'
            },{
                title: 'Action Two', 
                name: 'ActionTwo',
                tooltip: 'tooltip for action 2 goes here....'
            }]
        },
        selModel: {
            mode: 'SINGLE'
        },
        trackOver: true,
        cls: 'action-list',
        itemSelector: '.action-list-item',
        overItemCls: 'action-list-item-hover',
        tpl: '<tpl for="."><div class="action-list-item">{title}</div></tpl>'
    }],
    
    initComponent: function() {
        this.callParent(arguments);
    }
    
});

What is the proper way to add tooltips to these items?

Thank you - Randy

[arthurakay]

Two things:

1. Add the "tooltip" to your fields array on the store so it becomes accessible to the model.

2. Look at the API docs for Ext.tip.QuickTipManager - you can add DOM attributes like "data-qtip" to your template.

[navvn]

Just add into a tpl a code like this:

<span data-qtip="{name} bla bla">{name}<./span>

now this span will have a extjs tooltip

[rrandymeyer]

Resolved. This is how I implemented it:

    items: [{
        xtype: 'dataview',
        store: {
            fields: ['title', 'name', 'tooltip'],
            data: [{
                title: 'Action One', 
                name: 'ActionOne',
                tooltip: 'action one tooltip'                
            },{
                title: 'Action Two', 
                name: 'ActionTwo',
                tooltip: 'action two tooltip'
            }]
        },
        selModel: {
            mode: 'SINGLE'
        },
        trackOver: true,
        cls: 'action-list',
        itemSelector: '.action-list-item',
        overItemCls: 'action-list-item-hover',
        tpl: '<tpl for="."><div class="action-list-item" data-qtip="{tooltip}">{title}</div></tpl>'
    }],

[jeewiya]

hi ,
is there any way to add 'showDelay' value for the 'dataView' item 'tooltip'.