1. #1
    Sencha User
    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,353
    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 User
    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'.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi