Javascript Tooltips on Steroids
6 July 2006 | Tutorials | 27 Comments
Note: This is an update to my original post, which can be seen here: jQuery Tooltips
Cody Lindley, author of Thickbox, recently released jTip - The jQuery Tooltip.
I really like some of the extra bells and whistles that these tooltips provide. I’m sure that there are those among you that think there’s no need for yet another tooltip - but I can see some exciting applications for Cody’s idea in my own work.
The one big issue I had when I looked at the html source has to do with accessibility - links not working if javascript is turned off. I’m not inclined to look at all javascript through the accessibility prism, but it just seemed to me that there could be another way to create the same effect in a slightly better way.
Specifically, I didn’t like the idea of sacrificing the usability of a true link to another page for the benefit of the tooltip on hover. I love the tooltip - and no disrespect to Cody - but for the application I’m considering I need that link to work no matter what.
So what I’ve got for you today is a minor modification of Cody’s script. If you’re not a fan of his tooltips, then my rendition probably won’t wow you either. But if you like what he’s done and want links that will still work with javascript turned off, well this might just be right up your alley.
My Changes
The link that really got me thinking about tinkering with his code a bit was the one for yahoo. It leads to an external site (Yahoo), has a great little tooltip on mouseover, but I just didn’t like this code he used to create it:
<a href="yahoo.htm?width=175&link=http://www.yahoo.com" name="Before You Click..." id="yahooCopy" class="jTip"> Go To Yahoo</a>
So I rewired some of his script and now the same effect can be achieved like so:
<a href="http://www.yahoo.com" rel="yahoo.htm?width=175&link=yahoo&name=Before%20 %20You%20Click..." id="yahooCopy" class="jTip"> Go To Yahoo</a>
Improvement: HTML Validates
My new code validates, according to w3.org
Improvement: Naming
As I was going through the code, making some small changes, I noticed that Cody used a variable called ‘title’ that was assigned the value found in the name of the link. This could be a bit confusing.
I addressed the naming issue, even though I think it’s of little importance.
Improvement: Usability
With my code, you can choose to have each tooltip a genuine link to another document, internal or external. Or, if you just want the tooltip and don’t care about usability, you can choose to leave the link out of the equation.
The choice is yours.
Hat Tip
Cody came up with a great concept and saved me tons of time by doing the heavy lifting. My modification is in no way a criticism - just a slight “tweak” that I thought my readers might appreciate.
Enjoy.
Technorati Tags: javascript, tooltip, Cody Lindley, jQuery, accesibility
Subscribe
27 Comments
Leave a Reply
You can follow the discussion through the Comments feed. You can also pingback or trackback from your own site.
[…] « jQuery TabsJavascript Tooltips on Steroids » […]
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)
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.
@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.
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
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.
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.
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
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?
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.
Hi,
have you found a remedy to this bug?
http://imgpub.eu/jTip%20bug.png
(only MS IE)
Amazing what a few minutes of research will do
learningjquery.com
Could anyone post a more complete example related to Matt’s post above about loading inline content?
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.
Great tooltip and very easy to implement! Thanks!
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.
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.
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.
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.
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.
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…
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
Hello. How i can fix tooltip on center x and y ?
[…] 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 […]
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:
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
Thanks!