PDA

View Full Version : Tooltip / QuickTips: 2 questions



TheMonolith
11 Mar 2010, 1:28 AM
1)

I tried the following code to generate a tool tip for testButton. However, no tooltip is displayed when I hover over the button.

I don't get an error in Firebug and I have checked my entire code with JSLint. Why is it not working? Could it be because testButton is an item of a viewport that covers the entire window area?


var bla = new Ext.ToolTip
({
target: 'testButton',
title: 'bla!',
html: 'bla!'
});

var testButton = new Ext.Button(
{
text: 'test',
id: 'testButton',
width: 120,
height: 50,
x: 0,
y: 0
});2)

After having read the "QuickTipping" section in the "Learning Ext JS" book and having checked out the API documentation, I don't understand why there are two classes for tips: Ext.ToolTip and Ext.QuickTips.

To me, it seems like they do almost exactly the same. So why do they both exist? Are there any advantages / disadvantages in using one or the other?

Animal
11 Mar 2010, 1:34 AM
var testButton = new Ext.Button(
{
text: 'test',
id: 'testButton',
tooltip: 'blah',
width: 120,
height: 50,
x: 0,
y: 0
});

TheMonolith
11 Mar 2010, 1:56 AM
Okay, thanks.
I have used the tooltip property of Button before, but just wanted to use a button as a way to post a short example here.
My real problem is to provide tooltips for components that don't have the tooltip property, such as comboboxes, checkboxes, panels etc.

For example,


var bla = new Ext.ToolTip
({
target: 'previewPanel',
title: 'bla!',
html: 'bla!'
});


var previewPanel = new Ext.Panel(
{
title: 'Preview',
id: 'previewPanel',
iconCls: 'magnifierIcon',
width: getTitleBarWidth(previewImagePath, 400, 600),
height: 600,
border: false,
bodyCfg:
{
tag: 'div',
html: '<img src=' + previewImagePath + ' style=\'max-width:400px; max-height: 600px;\'>'
},
x: 50,
y: 50
});doesn't work. The panel is an item of a viewport that covers the entire windows area.

TheMonolith
11 Mar 2010, 2:47 AM
The QuickTips version doesn't work either (code from API doc.):


Ext.QuickTips.init();

Ext.QuickTips.register
({
target: 'previewPanel',
title: 'My Tooltip',
text: 'This tooltip was added in code',
width: 100,
dismissDelay: 20
});

Animal
11 Mar 2010, 3:54 AM
Use this plugin: http://www.extjs.com/forum/showthread.php?t=93901

You can either configure it with content, or subscribe to your Panel's beforeshowtip event to set the tooltip's content on the fly.

TheMonolith
11 Mar 2010, 4:12 AM
Animal, I'm sure the tooltip class you have written is great, but why does my code not work? After all, it's basically the same as the examples in the Learning Ext JS book and the API doc...

Also, in which ways is your class superior to the standard approach of using QuickTips or ToolTip?

Animal
11 Mar 2010, 4:14 AM
My class is a ToolTip.

It just means that you don't have to put your own code together in order to wait for your target Panel to be rendered before targetting the ToolTip on its element!

TheMonolith
11 Mar 2010, 4:51 AM
So the reason why my code isn't working is that using QuickTips / ToolTip you have to wait for the target component to be rendered first? I find that surprising because this isn't mentioned in the book.

If that's the case, why does the following approach not work:


var previewPanel = new Ext.Panel(
{
title: 'Vorschau',
id: 'previewPanel',
iconCls: 'magnifierIcon',
width: getTitleBarWidth(previewImagePath, 400, 600),
height: 600,
border: false,
bodyCfg:
{
tag: 'div',
html: '<img src=' + previewImagePath + ' style=\'max-width:400px; max-height: 600px;\'>'
},
afterRender: function()
{
Ext.QuickTips.register
({
target: 'previewPanel',
title: 'My Tooltip',
html: 'This tooltip was added in code',
text: 'This tooltip was added in code',
width: 100,
dismissDelay: 20
});
},
x: 50,
y: 50
});

It not only doesn't solve the tooltip problem, but it also messes up the panel position (0, 0) instead of (50, 50)...

Animal
11 Mar 2010, 4:54 AM
Because you override an internal function.

steffenk
11 Mar 2010, 8:58 AM
Also you find here some examples:
http://www.extjs.com/deploy/dev/examples/simple-widgets/qtips.html

JScoobyCed
14 Mar 2010, 8:03 AM
Hi,

I am using the tooltip to display a login form (maybe not the best Ext object to use?) but the tooltip doesn't render as I expect (yep, I must be doing something wrong :s).
http://www.up2pic.net/pictures/ce7273cb6ba8b98af45ddf9adce092d6.png
The Username/password is within an html form.
Here is the code:

Ext.onReady(function(){
new Ext.ToolTip({
title: '<a href="#">Login</a>',
target: 'login-zone',
contentEl: 'login-header',
autoHide: false,
closable: true,
draggable: true,
anchor: 'left',
html: null
});
Ext.QuickTips.init();
});and here is the 'login-header':

<div id="login-header">
<form id="loginForm" name="loginForm" method="post" action="/test/index.xhtml" enctype="application/x-www-form-urlencoded">
<input name="loginForm" value="loginForm" type="hidden">
<div style="float: left; width: 170px;">
<div style="float: right;">
<input id="loginForm:x_username" name="loginForm:x_username" size="10" style="border: medium none ;" type="text">
</div>
<div style="float: right;">Username:&nbsp;</div>
<div style="float: right;">
<input id="loginForm:x_password" name="loginForm:x_password" value="" size="10" style="border: medium none ;" type="password">
</div>
<div style="float: right;">
Password:&nbsp;
</div>
</div>
</form>
</div>

What am I doing wrong?

Thanks!