PDA

View Full Version : TOOLTIP



arunkumargm1987
27 Jun 2010, 11:24 PM
How can I integrate a jquery clue tip( sticky tool tip) into a extjs file ??


EXTJS code:
new Ext.FormPanel( {
labelAlign :'top',
renderTo :'AdvancedSearch',
border :false,
bodyBorder :false,
frame :false,
bodyStyle :'padding:5px 5px 0 243px',
width :'82%',
items : [ {
layout :'column',
items : [ {
columnWidth :.6,
layout :'form',
border :false,
bodyBorder :false,
bodyStyle :'padding:5px 5px 0 30px',
items : [ {
xtype :'textfield',
fieldLabel :'Search',
autoHeight :true,
width :'100%',
id :'txtSearch',
allowBlank :false,
anchor :'90%'
} ]
}, {
columnWidth :.2,
layout :'form',
border :false,
bodyBorder :false,
bodyStyle :'padding:20px 5px 0 60px',
items : [ {
xtype :'button',
text :'Search',
height :'25px',
width :'60px',
id :'lnkSearch'
} ]
}, {
columnWidth :.2,
layout :'form',
border :false,
bodyBorder :false,
bodyStyle :'padding:5px 5px 0 110px',
items : [ {
****TOOLTIP****

} ]
} ]
}..

The tooltip is part of a div,so I wudn be having a separate div in jsp page.And it would be an icon in the jsp page. What can be done?

Animal
27 Jun 2010, 11:39 PM
Back up. jQuery???

What is the UI pattern that you want.

Then we'll help you go about it in the correct way.

arunkumargm1987
28 Jun 2010, 12:37 AM
Actually,On mouse over I have to display "TIPS" section which has lot of text.I used
var tooltip = new Ext.ToolTip( {
html :'HI',
title :'Tips',
autoLoad: {url: 'ann2.htm'},
autoHide :false,
closable :true,
draggable :true
});

but this is not loading the content from the page specified in url and also how can i provide a different look to it,instead of the regular blue color tooltip ?

I thought of using jquery bcz it provided a better look & feel..

Animal
28 Jun 2010, 1:02 AM
You want to theme Ext?

Or do you want a tooltip that looks nothing like the page upon which it displayed?

As for not loading. How did you debug? Was there a request? Did it 404?

arunkumargm1987
28 Jun 2010, 1:09 AM
I want a regular tooltip which takes the bodycontent from a html page.
And regarding not loading,I dint get 404 or any other error.

arunkumargm1987
28 Jun 2010, 1:36 AM
Hi,anybody out there,Plz help..

Animal
28 Jun 2010, 1:44 AM
Did it even send the request?

Animal
28 Jun 2010, 1:44 AM
I'm trying to help.

arunkumargm1987
28 Jun 2010, 1:54 AM
M sry.. Its sendin request only to get the image,nothin else..

Animal
28 Jun 2010, 2:01 AM
So that autoload is not being triggered.

So the tooltip is not being shown then? Because autoload runs on render.

arunkumargm1987
28 Jun 2010, 2:28 AM
Yes,its not.. Even if I use contentEl,i have no luck.

Animal
28 Jun 2010, 2:37 AM
Luck doesn't come into it.

This is not a matter of throwing incantantions like "contentEl" around.

Lets go back to basics.

What are you trying to achieve?

arunkumargm1987
28 Jun 2010, 3:51 AM
Okay,
i have a tooltip in a Ext formpanel,
The tooltip's content should be read from a div or any other similar container.
The title is displayed correctly using title:'Tips'.
but the contentEl:'<<div's id>>' is not working.

The div contains data.

Animal
28 Jun 2010, 4:06 AM
What triggers this tooltip? Hovering over what target?

"The tooltip's content should be read from a div or any other similar container."

Doesn't mean much.

arunkumargm1987
28 Jun 2010, 5:08 AM
I have a icon, the tooltip must be triggered on mouse over.

"The tooltip's content should be read from a div or any other similar container."

- means the text inside the tooltip other than the title must be fetched from div, example

<div id="tooltiptext" >
<p>This is Tooltip text</p>
<p>This is Tooltip text</p>
<p>This is Tooltip text</p>
<p>This is Tooltip text</p>
</div>

The "This is Tooltip text" is the text to be displayed inside the tooltip.

Animal
28 Jun 2010, 5:43 AM
Why "fetch"? Does the content of the tooltip change?

I mean it can be done in a "beforeshow" listener, but if it's just some boilerplate text, just build it in.

So you have an HTML element which should trigger it.

So. Create the Tooltip with the target as that element.