View Full Version : Tooltip problems

6 May 2011, 6:05 PM
I am trying to create a tooltip inside of a renderer of a column in a grid panel. I have two problems.

1. I want the tooltip to to have the following config properties (ie I do not want to tooltip to disappear)
autoHide: false,
closable: true

2. when I have a really long string of characters without a space the characters spill over the edge of the tooltip window. So I guess I need to set
width: 500
Also in the documentation the width max is 500, if I cannot control the length of a string of characters it might still spill over. Is there a way around this.

So my biggest problem is that I am creating the tooltip using the 'qtip' attr in a div element so I have no idea how to set its config properties. Is there a another way to create the tooltip and insert it into the div and still return the renderer to do the right thing?


MyApp.Grid = Ext.extend(Ext.grid.GridPanel, {
initComponent:function() {

// hard coded - cannot be changed from outside
var config = {
// store
store: new Ext.data.JsonStore({
fields: ['id', 'data'],
data: [{
id: 1,
data: 'baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'

// column model
header:'Some Data',
renderer: this.customRender.createDelegate(this)
qtipTpl: new Ext.XTemplate(
'<tpl for=".">',

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

// call parent
MyApp.Grid.superclass.initComponent.apply(this, arguments);

customRender:function(value, metaData, record) {
// create tooltip
var qtip = this.qtipTpl.apply({
value: value

// return markup
return '<div qtip="' + qtip +'">' + value.substring(0,5) + '...' + '</div>';