Comments on: Javascript Tooltips on Steroids

By: 15 Days Of jQuery : jQuery Tooltips

15 Days Of jQuery : jQuery Tooltips — Thu, 06 Jul 2006 14:20:16 +0000

[…] « jQuery TabsJavascript Tooltips on Steroids » […]

By: Mike

Mike — Tue, 22 Aug 2006 21:33:01 +0000

Excellent script. I’d like to use this for a client’s site, but I don’t think they’ll be able to figure out how to add an ID to a link. Can this effect be accomplished without the use of an ID? (I tried to do it myself, but unfortunately my jQuery knowledge isn’t there yet)

By: Kyle

Kyle — Wed, 23 Aug 2006 23:56:41 +0000

The one thing I’m not crazy about here is that the tooltips disappear when the mouse leaves the link and goes into the tooltip. IMO, the tooltip should persist while the mouse is in the tooltip itself — which would open up the possibility of having other links even within the tooltip.

Otherwise, it’s incredible. I’m getting sold on jQuery in a big way. Dojo was my other choice, but the documentation is horrid.

By: Jack

Jack — Thu, 24 Aug 2006 01:30:57 +0000

@Mike
Very glad you like it. I am pretty sure you need an id. If memory serves, I had to use every possible id, name, class, attribute allowed.

@Kyle,
There are lots and lots of tooltips to choose from. These offer some nice benefits but they aren’t perfect for everyone. I know I’m not breaking new ground with a response like that, but one of the main focuses of the site is to introduce jQuery to a wider audience and share my passion for what I seem to think is a really, really useful javascript library. I don’t have much experience with Dojo, but jQuery is just so darn easy to use. And the documentation is pretty good too.

By: kain

kain — Thu, 07 Sep 2006 09:36:27 +0000

with the latest jquery from svn all I get is an error on this function:

$(document).ready(JT_init);

telling that $(document).ready is not a function.

with the latest stable of jquery (1.0.1) everything works, any hint for this? thanks

By: Jack

Jack — Mon, 11 Sep 2006 13:32:34 +0000

In my experience, this usually means that you linked to the wrong directory location for the browser to find jquery.js

Check to make sure that the javascript file is correctly linked to in the head of your document.

I find that using the Web Developer extension for the FireFox browser is a quick and easy way to view the attached javascript and detect if I’ve mistyped the javascript link in the html source.

By: Matt

Matt — Wed, 18 Oct 2006 20:52:03 +0000

Nice work (and of course hats off to Cody)! Do you think its possible for this tooltip to display the contents of a hidden div (via CSS with negative margins, etc.) on the same page (i.e. href=”#someDiv?width=…”)? I’ve been looking for a tooltip that both works with external files but also is capable of displaying content from the same document, which of course makes printing all content a snap thanks to a simple printer stylesheet.

It’s also right in line with the push of DHTML…more active interfaces for browsers, but with content that remains flexible for other mediums, devices, etc.

By: Jack

Jack — Thu, 19 Oct 2006 03:20:21 +0000

Matt,
Yes. Possible. Even easy.

$('#JT_copy').load(info);

The load part is what you want to change. You’d want to grab the hidden div and append it to JT_copy

By: theo mseka

theo mseka — Mon, 30 Oct 2006 16:08:27 +0000

great work guys,

Having a problem i hope you can help me with.

trying to call a dynamic page that needs variables for it to load which tooltip to show. is there a way to modify the code to allow for dynamic urls?

By: Jack

Jack — Mon, 30 Oct 2006 16:37:04 +0000

You’d have to use either the $.get() or $.post() function to pass the variables, and then put that data into #JT_copy. This would replace the load() function in the script.

By: Attila

Attila — Tue, 31 Oct 2006 16:51:43 +0000

Hi,
have you found a remedy to this bug?
http://imgpub.eu/jTip%20bug.png
(only MS IE)

By: Jack

Jack — Tue, 31 Oct 2006 16:59:16 +0000

Amazing what a few minutes of research will do

learningjquery.com

By: Jacques

Jacques — Fri, 12 Jan 2007 18:39:58 +0000

Could anyone post a more complete example related to Matt’s post above about loading inline content?

By: Mashiku

Mashiku — Wed, 31 Jan 2007 08:38:19 +0000

I was able to have tooltip remain displaying event after the cusor is outside the link. I am trying to modify it in such a way that the tooltip will go away when the mouse is outside the div area.

I assume this is possible. Any ideas will be appreciated.

By: Shawn

Shawn — Wed, 14 Feb 2007 18:55:56 +0000

Great tooltip and very easy to implement! Thanks!

By: pezkel

pezkel — Fri, 06 Apr 2007 15:43:31 +0000

I really like this implementation. Do you think it is possible to change this and have the tooltip move upward if it is near the bottom of the viewport. If make the viewport smaller and mouseover I can only see half of the tooltip. Is it possible to keep it into view?

Much appreciated and keep up the good work.

By: Jack

Jack — Fri, 06 Apr 2007 15:52:28 +0000

Pezkel,
Possible, yes. Take a look at the way it determines whether to show it left or right… then hack away. I think the obstacle you’ll run into will be calculating the height of the tooltip window. See the original tooltip author’s site for user contributions, comments that might help you in this regard.

By: Kevin Koltz

Kevin Koltz — Wed, 25 Apr 2007 17:10:46 +0000

Seems to be a memory leak when the jTipiFrame iframe is prepended to the JT div. It is not removed on mouseout. I modified line 19 to be:
$(’#JT, #JT_arrow_left, #JT_arrow_right, #jTipiFrame’).hide().remove();

No more leak.

By: Bruno Goyanna

Bruno Goyanna — Thu, 26 Apr 2007 05:02:06 +0000

Mashiku, I needed the same feature as you, to keep the tool tip on the screen and only disappear when we move out from the tooltip box.
A did the following changes to the code:

1 - Removed the function to remove the JT div from hover out

$(”a.jTip”)
.wrap(”)
.hover(function() {
JT_show(this.href,this.id,this.name)
},function() {
})

2 - Added a remove on the JT_show method, to avoid open more than one tooltip at the same time.

$(’#JT, #JT_arrow_left, #JT_arrow_right’).hide().remove();

3 - At last added the hover out function from the tooltip on the last line of method JT_show

$(’#JT’).show().hover(function() {
},function() {
$(’#JT, #JT_arrow_left, #JT_arrow_right’).hide().remove();
});

One thing that could be done is to create another kind of class jTipFixed, so this hover function would be applied. It would have both features on the same script.

By: federico

federico — Mon, 30 Apr 2007 10:17:36 +0000

hello, does anyone have a working example of the feature requested by theo mseka on 30 Oct 2006.

Basically, i also need the script to work with dynamic urls…

something like:

LINK HERE

thanks.

By: federico

federico — Mon, 30 Apr 2007 10:49:07 +0000

Sorry, the above message was not very clear: so, to be precise: I need the link to work and to link to something like “yahoo.com?product_id=4″.

while the tooltip should also be dynamically generated. the string to be passed on should be something like:

jtip.php?product_id=4&width=400&name…

Thank you again for any feedback…

By: srini

srini — Thu, 06 Sep 2007 14:58:08 +0000

first of all.. very very great script.. its slick and neat..
I was able to configure it to my needs. I wanted the tooltip to be coming from dynamic page.. so this is how i did..
getInfo.php?param1=abcd
This php program queries the database and displays the results in tooltip.. the tooltip doesnt showup for the firsttime. Once I click on the “?” it opens the php file in the complete window.. then Once I click the browser back button and see.. then tooltip starts working. any idea how to fix this? Thanks in advance

By: Nick

Nick — Wed, 02 Apr 2008 00:50:51 +0000

Hello. How i can fix tooltip on center x and y ?

By: 65 Excellent jQuery Resources (tutorials,cheat sheets,ebooks,demos,plugins…) | Speckyboy - Wordpress and Design

Wed, 02 Apr 2008 12:05:04 +0000

[…] preserving document semantics 16. Fancy Drop Cap 17. Easy Multi Select Transfer with jQuery 18. Javascript Tooltips on Steroids 19. Edit In Place with AJAX 20. Style Sheet Switcheroo 21. Safer Contact Forms Without CAPTCHA’s […]

By: akjoshi

akjoshi — Fri, 18 Apr 2008 08:25:15 +0000

Can anyone explain how to use $(’#JT_copy’).load(info); to achieve this-

“Do you think its possible for this tooltip to display the contents of a hidden div (via CSS with negative margins, etc.) on the same page (i.e. href=”#someDiv?width=…”)?
”

Pls see comments for reference -

Matt said on 18 Oct 2006 at 4:52 pm:
Jack said on 18 Oct 2006 at 11:20 pm:

By: Vlad

Vlad — Wed, 23 Apr 2008 06:38:15 +0000

Hi, great modification!
The original works, your example works, but I have an issue with it on my page.

For some reason instead of loading the htm file it loads the target page (in case of your example the yahoo.com page) in the tooltip!!!!

Can someone help me with this?
Thanks

By: 20 Amazing jQuery Plugins and 65 Excellent jQuery Resources | Speckyboy - Wordpress and Design

Mon, 21 Jul 2008 09:15:40 +0000

By: “The Complete Guide” for jQuery Developer- Reblog « Dynamic Disruption

Tue, 19 Aug 2008 02:42:59 +0000

[…] Javascript Tooltips on SteroidsVery detailed tooltips with Javascript. […]