1. #1
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    60
    Answers
    1
    Vote Rating
    3
    rrandymeyer is on a distinguished road

      0  

    Default Answered: Tooltip help for dataview

    Answered: Tooltip help for dataview


    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:

    Code:
    /**
     * @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

  2. 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.

  3. #2
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,363
    Answers
    60
    Vote Rating
    33
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    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.
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  4. #3
    Sencha User
    Join Date
    Dec 2010
    Posts
    46
    Vote Rating
    0
    navvn is on a distinguished road

      0  

    Default


    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

  5. #4
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    60
    Answers
    1
    Vote Rating
    3
    rrandymeyer is on a distinguished road

      0  

    Thumbs up


    Resolved. This is how I implemented it:

    Code:
        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>'
        }],

  6. #5
    Sencha User
    Join Date
    Sep 2011
    Location
    srilanka
    Posts
    18
    Vote Rating
    0
    jeewiya is on a distinguished road

      0  

    Default


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