View Full Version : [3.1.1] How to set a tooltip on the expand/collapse tool ?

24 Feb 2010, 12:35 AM

I need to set a tooltip on collapsible panel.
The expand/collapse tool is added automatically from ExtJS but I haven't found a way to add it....
Really I found a workaround but setting a fixed tooltip for all tools on that panel... and this is not a good solution..


Ext.onReady(function () {
new Ext.Viewport({
layout: 'border',
items: [{
xtype: 'panel',
region: 'west',
collapsible: true,
// toolTemplate: new Ext.Template('<div title="Hard coded tooltip" class="x-tool x-tool-{id}"> </div>'),
title: 'west region collapsible',
html: "west"
xtype: 'panel',
region: 'center',
title: 'center region',
html: "center"

You can see my "solution" to the problem... adding a toolTemplate on the panel.. but in this way I can use only 1 tooltip for all tool on that panel....

It is also not a good solution because the tooltip is rendered as standard HTML title.. and not according ExtJS look & feel...

Any Idea ?

24 Feb 2010, 12:50 AM
hi dtex-lab,

i took a look into the code of Ext.Panel:

onRender : function(ct, position){
Ext.Panel.superclass.onRender.call(this, ct, position);

var el = this.el,
d = el.dom,

if(this.collapsible && !this.hideCollapseTool){
this.tools = this.tools ? this.tools.slice(0) : [];
id: 'toggle',
handler : this.toggleCollapse,
scope: this
,qtip: "customToggleTip" // not here

the red line is missing and the collapse tool is autocreated, so you will need to override the onRender.

each custom created tool has a qtip config -> look in the api, panel, tools-config.
so, you can add a custom tool with tip that collapses the panel and hide the default one (hideCollapseTool). quite a workaround but less code than overriding ;)

kind regards,

24 Feb 2010, 1:15 AM
Ty Tobiu

I see that ExtJS doesn't have this feature..
I believe for ExtJS team will be very simple to implements it.. only 2 lines of code.. and it will be appreciate for all extjs users...
In my case I would like to indicate the keyboard shortcut assigned...

by the way... I believe that your suggestion to hide the std tool and add a custom one will not fix the issue... in this case when the panel is collapsed... no tool for expand it again will be displayed..

ty anyway

24 Feb 2010, 3:16 AM
I try to override completely the onRender function in order to add a fixed qtip... but it doesnt' works anyway :(

The only solution found is using a toolTemplate...

Any other ideas?

24 Mar 2010, 6:55 AM

The last line of Tobiu's post stated that you could try a custom tool...

collapsible: true, // Turn on collapsible feature
hideCollapseTool: true, // Turn OFF the default collapse tool

// Define your own tool that calls the toggle functionality
tools: [{
id: 'toggle',
handler : this.toggleCollapse,
scope: this,
qtip: "Expand / Collapse" // <<<< Define your tooltip here

This works for me apart from the minor problem that the tool is disappearing in collapsed state!!

UPDATE: This is because of a dependency in BorderLayout on the property 'hideCollapseTool'. I might go as far as to say this is a bug...instead of checking hideCollapseTool it should look in the tools property to find a tool with id 'toggle'. This would work better.

Let me know how it works for you,


24 Mar 2010, 7:30 AM
Hi hjones

I try your solution... but...
First I have same issue because when I click the toggle button nothing happends..
anyway.. I try to render it as collapsed and also I don' tsee the toggle botton..

My final solution is to use ExtJS Template.

toolTemplate : new Ext.Template('<div title="my alt text" class="x-tool x-tool-{id}">&#160;</div>'),


24 Mar 2010, 7:44 AM
Ok...your solution works great for me too...thanks!

I am going to file a bug though because they either need to expose a tooltip text property in the Panel or they need to make the BorderLayout pick up the 'toggle' tool configuration from the Panel's 'tools' config as I attempted above.


24 Mar 2010, 7:57 AM
Here's another nice solution as a plugin...