View Full Version : Tooltip - 'html' or 'text' property!? (Bug?)

25 Jun 2010, 12:33 AM
Hi everyone,

I'm using Ext 3.2.0 and encountered some strange behaviour which took me a while to analyse.

API and the examples in ExtJS made me believe this would be the right way to create a tooltip:
new Ext.ToolTip({
target: 'tip1',
html: 'A very simple tooltip'
});but this wouldn't work:

var ttip = new Ext.ToolTip({
html: 'a very simple tooltip'
var btn = new Ext.Button({
text: 'my button',
tooltip: ttip
})because as soon as you add the tooltip instance as config parameter to another object, it will not show the html property but the 'text' property.

check this out:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext/ext-all.js"></script>
<script language='JavaScript' type='text/JavaScript'>
Ext.onReady(function() {
var ttip1 = new Ext.ToolTip({
target: 'ttip-target',
title: 'ToolTipTitle1',
html: 'this tooltip shows only the <b>html</b> property',
text: 'text1'
var ttip2 = new Ext.ToolTip({
title: 'ToolTipTitle2',
html: 'html2',
text: 'this tooltip reads only the <b>text</b> property'
var btn = new Ext.Button({
renderTo: 'ttip-button',
text: 'tooltip text button',
tooltip: ttip2
<div id="ttip-target" style="background-color: yellow; border: 1px solid black; text-align: center;">tooltip html property</div>
<div id="button"></div>
<div id="ttip-button"></div>
</html>also very disturbing: the API docs don't even mention the text property as part of the Ext.Tooltip object.
I encountered this weird behaviour while trying to update the tooltip instance (which fails, but that's another story).

10 Jun 2011, 9:43 AM
I have the same problem...

Any help ?

10 Jun 2011, 11:41 PM
Everything is working as documented but I'll grant you it is confusing.

The key thing to note is this line from the docs for Ext.Button (http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.Button):

tooltip: The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config object

There is no mention of passing in your own Ext.Tooltip. What's happening is that it's treating your Ext.Tooltip object as a QuickTips config. You would have seen the same effect had you passed in just about any component, not just an Ext.Tooltip. Such configs support a property called text, rather than html (see Ext.QuickTips (http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.QuickTips)).

22 Aug 2011, 12:15 PM
This is related to using button objects on a dockedItems. The button has a tooltip and html (flash object). The tooltip does not show.