PDA

View Full Version : Tooltip help for dataview



rrandymeyer
24 Aug 2011, 1:11 PM
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
24 Aug 2011, 1:22 PM
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
24 Aug 2011, 10:58 PM
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
25 Aug 2011, 9:18 AM
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
2 Jan 2012, 9:33 PM
hi ,
is there any way to add 'showDelay' value for the 'dataView' item 'tooltip'.