Updated Plugin – jTip

read 83 comments

Update

This plugin is no longer being supported. If you’re interested in trying a tooltip plugin with lots of features, please check out my clueTip jQuery Plugin. Thanks.

In the jQuery universe, Cody Lindley is probably most known and loved for his Thickbox, a lightbox technique that “can show html pages as well as images … pulled from the server using AJAX” (cf. Thickbox – One Box to Rule Them All). However, he has also created another useful plugin called jTip, a light-weight AHAH tooltip solution with some nice options. As Lindley explains:

jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too. Also jTip can be customized by providing user defined widths (defaults to 250px wide) via a url query string. The height is liquid and stretches to match the content that fills the tool tip. Additionally it’s possible to provide a link (via url query string) to a jTip tool tip link element (a href) so that the link will still function as expected by the user. See the Yahoo link in the demo for a working example.

A Few Changes

When Rey Bango asked the jQuery Discussion List for some help with updating the plugin, I jumped at the chance. Together — and with assistance from others on the list — Rey and I made the following changes:

  1. The hide() method is added to the mouseout to correct an issue with Firefox
  2. An iframe is inserted to correct IE’s problem with select boxes always getting top billing for z-index. The iframe is styled to cover the select box while remaining transparent, based on the CSS at <SELECT>-Free Layer
  3. If JTip appears to the left of the element hovered over, and if the JTip is too wide to fit entirely within the document window, its width decreases to the widest possible without having any of it cut off.
  4. The JTip position moves up if it’s initially cut off at the bottom of the viewable area, and moves down to the top of viewable area if its height is greater than that of the document window.

One Small Problem

There is only one small problem still unresolved: In Firefox 1.5.x, when the jTip’s link is close to the bottom of the viewable area, the jTip flashes below the viewable area for a split second before appearing in its optimal position. If the page doesn’t already have a vertical scrollbar, one will quickly appear and then disappear. There must be a way to prevent this annoyance, but I haven’t figured it out yet. I first load the jTip with its contents, then get its height, and finally show it — a sequence that should avoid the problem. And it does work in other browsers, just not Firefox. Oh well, I’m still learning. The good news is that the set of circumstances necessary to produce the problem would hardly ever happen on my sites. Still, if anyone out there has a suggestion, I’d love to hear it.

comment feed

83 comments

  1. Erin

    Tutorial! Tutorial!

  2. Sure, I’ll write something up. I’m on vacation now with limited internet access, so it probably won’t happen until a week from now at the earliest.

  3. Rey Bango

    Great work Karl. I did a little bit but man you nailed it with some really cool features, especially the repositioning stuff.

  4. Nice work, this version rocks! Much better than the orginal.

  5. enquest

    Is this version a new version or a fork off the original?

  6. Jason

    For some reason, I still get flickering (creating multiple versions) in Safari (2.x). It’s only when I hover over from the right side though, so it’s probably just a bug with safari(?). I added this code to the beginning of the show function and it seemed to fix it as it denies multiples. I’m not an expert in javascript though, so I’m sure there’s probably a better way to detect duplicates.

    if ($(‘#JT’).html() != “” && $(‘#JT’).html() != undefined)
    return;

  7. Jason

    Also, I’m not even sure if undefined is needed; I just added that in to be sure.

  8. theo mseka

    hi there,

    firstly just wanted to say congrats to both Cody and you for the job well done. I’ll go post on Cody’s site as well.

    How do you link to a dynamic page. ie i have a page that i need to pass a variable to in order for the tooltip to show correctly eg

    <a href=”page.php?width=300&pageID=20″ rel=”nofollow”>

    i need to pass th variable pageID to the page? sorry my english isn’t the greatest

  9. Jason

    theo mseka:

    I’m pretty sure you can just include it there and keep the question mark at the end (which should seperate it correctly.

    href=”page.php?id=6?width=[...]

  10. Jason, thanks for the code suggestion and for helping theo out.
    enquest, I guess I would call it a new version. I haven’t really given it much thought. If Cody has a preference, we can call it whatever he’d like.

  11. Hi Karl,

    Is it true that I can’t use jTip to pull content from a fragment identifier on the linked page? For example, if my url is this: test.asp#foo, ALL of the content from the page gets put in the jtip, not just the #foo content. I am missing something easy?

    Thanks for your help!

  12. Stephen, as far as I know, you are correct. You can only pull in all of the content from the page. But maybe there is a way to grab a fragment if I tweak the plugin. I’ll poke around a bit and see what I can come up with.

  13. Thanks Karl,

    I wanted to ask before I tried clumsily to figure out on my own. I will let you know if I come up with anything as well.

  14. I agree with stephen, this would be great. It would be ideal for my usage, if you could do like thickbox does, and display hidden content on the current page. Is this possible?

  15. Christian

    I’m just starting with jQuery and jTips and downloaded the files extracted it and it works fine but as soon as I put the code into the file where it’s needed it doesn’t work anymore.

    The pathes are all correct: I come into the ‘JT_init’. If a put an alert there, it shows up as expectet but the events seem not to work.
    On Mouseover / Hover over the a with class ‘jTip’ nothing seems to happen.

    I have no idea on how to debug this.

  16. Hi Christian,
    Welcome to the wonderful world of jQuery! Sorry you’re having problems with the jTip. Can you point me to a URL where you are testing this? It will make it easier for me to help you debug the problem. Thanks.

  17. Christian

    Thank you Karl
    Sorry for the delay! I didn’t look at your entry but now tried to come back to jQuery and still couldn’t get it to work.

    The files are only in the intranet now (and will be available on the extranet) but I put them to http://www.chruezundquer.ch/mgb/index.htm where you can see that it works in Firefox but not in IE.

    I have no idea why because the original demo (http://www.chruezundquer.ch/mgb/index2.htm) seems to work in this environment.

    Well, by now I’m so far to understand that propably the only difference lies in the css, so I have to watch out for things there.

    I know that some things are not perfect in the page but I can’t change it to a degree since most content is generated by a cms.

    So thanks for any hints.

  18. Hi Christian, I don’t know for sure what the problem might be in Internet Explorer, but I think a good place to start would be running your page through an HTML Validator. One quick think you could try is to put quotation marks around the ID and class values in your jTip <a> tag, so that (instead of class=jTip id=one) they look like this: class="jTip" id="one". Let me know if either one of those ideas works for you.

  19. Christian

    Thanks Karl
    I couldn’t find any more errors with the validator that I could change (some invality comes from the cms) and the quotes didn’t help either. This propably means I can’t use jTip since it needs a valid XHTML file to begin with. (although I can’t think of what makes the HTML unusable)

  20. What I want to do on my blog, is every few hours take the oldest post and move it to the
    front of the queue, all automatically. Anyone know if there is a plugin that can do this or
    a simple way to set up another plugin to do this (use my own feed perhaps)?
    Thanks.

  21. rolfsf

    Is it possible to have the left and right arrows to appear on top rather than on the left or right, and have the jtip appear just below the object (rather than next to it)? As it is, it tends to cover critical info on the same line as the object that triggers the jtip… would this be a css change, a js change or both? Thanks!

    _/\________________
    | left arrow
    |
    |__________________|

  22. Hi Rolfsf,

    It is possible to do that. It would require a js change. The only potential problem I see with having the jTip appear below the link is that it would be cut off if the link is too close to the bottom of the viewport. That’s the reason I updated the plugin in the first place. What would you expect it to do in that situation? Appear above the link instead?

  23. rolfsf

    Good point…

    Yes, I suppose appearing above would make sense in that case, which would then mean you’d need top and bottom arrows…

    I have to go back and look at the demo again – how does jtip deal with a link at the bottom of the screen now? I guess the mythical perfect tooltip would sprout arrows at any of the four corners, up or down, giving it the ultimate flexibility. Or maybe no arrows :-(

  24. rolfsf

    I see now why you did it the way you did – a good solution. I just have to think about my particular case where the tooltip covers important info in adjacent table cells.

  25. Yeah, it seems like there are trade-offs any way we slice it. I hope you figure out a workable solution. Let me know if I can help.

  26. ek

    hi,

    thanks a lot for this powerful tools but i have a problem for make some ugly target=”_blank” each time that’s open the link in the same window.

    <a href="tip.htm?width=375;link=http://www.link.jp/" target="_blank" name="Information" id="one" class="jTip">one link</a>

    (sorry for my badly english)

  27. ek

    i have try to add this just after the ligne 36 in jtip.js

    $(‘#’ + linkId).attr({target: “_blank”});
    or
    $(‘#’ + linkId).attr(‘target’,'_blank’);

    the both add the target: “_blank” for the link’s Jtip but same that don’t want to open in a new window

  28. Andre_PC

    I don’t know if this was mentioned or not (AFAIK, it wasn’t) and if it is too obvious for everybody else (wasn’t for me) but, for the “fix to work, you need to set any link (or at least its parent tag) with the tooltip to “position: relative;” or else it won’t work. I struggled for days until I found out what was the problem.
    Anyway, thanks for the updated plugin!

  29. @Andre_PC, for mentioning the need for position:relative. I imagine absolute positioning would work as well, but if I recall correctly the offset height and width rely on an element being positioned — i.e. anything other than the default static.

    @ek, I’ll try to look into that issue for you. Can’t promise when I’ll get to it, but if you don’t hear from me in a few days feel free to send an email to karl@[thisdomainname.com], where [thisdomainname.com] == learningjquery.com.

  30. Andre_PC

    Sorry to bother you again.
    I want to add a link to the jtip (like the yahoo example on Codey’s original jtip), but your code uses the href instead of the rel with params like the original. How I do that? Thanks in advance.

  31. Andre_PC

    Ops, nevermind. Just read ek’s comment (I was using “url” instead of “link”).

  32. Stephen Halsey

    Hi again,

    I am having a problem getting the tooltip to show up next to the cursor, it seems to be using some other element on the page for positioning and is consistently appearing below that element. I took Andre_PC’s suggestion, setting a bunch of parent elements to position:relative; to no avail. Well, at first the tip was pinned to the top of the viewport, then setting pos:rel on another element made the tooltip stick to that.

    The jTip shouldn’t depend heavily on markup should it? Our pages are valid using a strict doctype using a basic 2 col layout via floats. Nothing too crazy? Any ideas?

  33. Hi Stephen,
    Yeah, I definitely see what you mean. The JTip does rely on a relatively positioned containing element. I just added a line to the code to wrap all of the jtip links in a relatively positioned <span> element. You can see it here. The script is called jtip2.js. Give it a try and see if that works for you.

  34. I think this did the trick! I haven’t tested in Windows yet but I don’t see why it wouldn’t fly. Very easy fix, thanks for the speedy reply I will let you know if I have any other issues.

  35. Andre_PC

    Hi Karl,

    You forgot to add the “scripts” directory on the url for the update jtip above. So the correct location is: http://test.learningjquery.com/scripts/jtip2.js

    Nice job, though. I don’t know why I haven’t thought of updating the script instead of updating the pages I was working!

  36. Good catch, Andre! Thanks. I just updated my link, too, so we should be all set.

  37. Sorry to hear that. By the way, a few days ago I changed the code in a file called jtip2.js to add a span wrapper around the jtip link so that it would get the correct offset values. I just updated the jtip.js code to include the same change. It might be worth checking it out again to see if it works for you. The nice thing about this update (when it works) is that it adjusts the position of the jTip depending on where it is shown in relation to the viewport.

  38. Hi Fudsey,

    For the link part of your problem, try separating the GET parameters with an ampersand, preferably character-encoded like so: &amp;.

    For example, you might have something like this:
    <a href="/tiptoget.htm?width=350&amp;link=http://www.learningjquery.com" class="jTip" id="foo">

    For the problem with positioning, if you could post a link to an example page, I’ll have a better chance of being able to help you.

  39. No luck Karl…… I think its something with php and the href tag.

    You can see it on my website click on my name to get there. It is the server monitors on the left side, the top set, hover over the “players x/xx” on any of the monitors. It, for some reason, aligns itself with the top monitor and not any of the rest in line. The set at the bottom of the left is the originals.

    The link should point to the same link as the original one and the popup should be another page without the header and footer of the e107 system.

    Thanks for your help Karl :)

  40. Fudsey

    It seems your spam filter hes deleted all of my questions as spam:(

  41. Hey Fudsey, I managed to rescue your comments from the spam bin. Sorry about that. However, when I took a look at the page you reference, I couldn’t find any of those “server monitors.” Feel free to contact me directly through email — karl\at/learningjquery\dot/com — or AIM (k-e-s-w-e-d-b-e-r-g) (without the hyphens). Sorry I can’t give you the email address or IM alias straight; trying to avoid the spam harvesters.

  42. Mo

    Hi,

    Thanks for the code.

    I found that I could not figure out what the “self” means in the subroutine JT_show:

    function JT_show(url, linkId, title){
    if(title == false) title=" ";

    var de = document.documentElement;

    var w = self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
    //???? self =????
    ...
    }

    Because of no the definition of self, we could not get self.innerWidth. Is it mean this? If so, is it necessary to add a line as shown as follows:


    var self = this;
    var w = self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;

    Mo

  43. Mo

    Hi,

    After a searching, I began to know the self in DOM means the the window object. Sorry that I did known self but this.

  44. Hi Mo,

    Glad you found the answer! Coincidentally, there was just a discussion of self on the jQuery mailing list.

  45. Lorena

    Hi, I´m only using jquery for a few days and I need to use the jtip in a hotspot image (I need show details in a image of a building plan), and I can´t do it work! Can anyone help me? Sorry for my bad english!
    Thanks!!!

  46. Hi Lorena,

    Can you provide a URL so that I can see where you’re having problems? Also, if you could provide some details about the problem, it might help me (and others) to help you. I confess that I have not tried using the jTip with an image map, so I don’t know how it would handle getting the hotspot’s coordinates.

  47. Lorena

    Hi, thanks for the reply. I made an example, because the real thing is for the intranet for my job. the url: http://www.hacfsa.gov.ar/es/download/ejemplo/
    I change a line in the jtip.js, the line number 15:
    originally was: $(“a.jTip”)
    and I change to: $(“area.jTip”)

    this works (in IE, not in FF), but the tooltip not appears in the right place… I think is a problem with the coords of each area.
    I hope you understand my english, if not, I can post in spanish.
    Thanks!
    Lorena

  48. Has anyone been able to modify it so you can keep the tip visible to click on a link inside of the tool tip or able to get it pull content from inside the same file?

  49. Shelane Enos

    Karl, You mentioned on the list yesterday that you might have some time soon for a revision of this plug-in. I have a “wish list” for you if you will indulge me :-) (some of these wish items are listed by others above)

    - combine some changes made by Jack Born on http://15daysofjquery.com/jquery-tooltips/21/ to improve naming and usability/accessibility of external links
    - make safe for use on pages with other libraries
    -cache results of first load of each tip on page so it doesn’t have to make multiple calls to the server for the same tip
    -ability to “stick” tip until user clicks a “close” button (maybe in the header portion) or clicks outside of the tip (to allow for links inside the tip to be followed)
    -ability to load tip from a hidden div on the local page

    Thanks for all your work with jQuery. All community contributions make my job a whole lot easier :-)

  50. Hi Shelane,

    These are great suggestions! Thanks for taking the time to write them down. I don’t see anything there that is immediately out of the question. I’ll do my best to include them in the release.

  51. Karl,
    I did some changes on the updated code to keep the TIP until a hover out happens from the tooltip DIV.

    1- On JT_init()


    $("a.jTip")
    .wrap('')
    .hover(function() {
    JT_show(this.href,this.id,this.name)
    },function() {
    })
    .click(function(){return false});

    removed the hover out function. Here we could just add this other call over a.jTipFixed for example.

    2 – JT_show() first line added to avoid open multiple tooltips

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

    3 – JT_show() last line added to remove tooltip when hover out the tooltip area

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

    Hope this helps the people that would like to have links or actions inside the tooltip, and tks for the great plugin…

  52. Thanks a lot, Bruno. Looks great.

  53. federico

    Hello,

    I need the link to work and to link to something like “yahoo.com?product_id=4″.

    but i also need tooltip to be dynamically generated. the string to be passed on should be something like:

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

    is this possible? Thank you for your feedback…

  54. Yes, that’s possible. You can see my tooltip example here http://education.llnl.gov/jQuery/ajax.html which demonstrates my page: tips.lasso?tip=trees&width=400.

    BTW, I incorporated Bruno’s changes for the tip to stay up until a user mouses out. This isn’t entirely intuitive if the user never mouses into the tip, so maybe doing a close option inside would still be good.

  55. Hi!

    I think you have done a great job!. What I am trying to do is to retrieve information from a database and display it in the tooltip. My understanding is that this is possible, but I have no knowledge of ajax, php. So, I have been trying to do this for the past few days with no success. I think it would take a couple of minutes for you to help me, if possible.
    I have made a php page which queries the database and updates the div section. When I load this page, the information is displayed correctly. But when I load it inside the tooltip using jtip, it is static and nothing happens.
    Could you please help me? I would highly appreciate it. This is the page.php that I call from jtip.


    function getPage(page){
    var xmlhttp=false; //Clear our fetching variable
    try {
    xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
    try {
    xmlhttp = new
    ActiveXObject('Microsoft.XMLHTTP');
    } catch (E) {
    xmlhttp = false;
    }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
    }
    var file = 'text.php?moteId=';
    xmlhttp.open('GET', file + page , true);
    xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4) { //Check if it is ready to recieve data
    var content = xmlhttp.responseText;
    if( content ){ //Make sure there is something in the content variable
    document.getElementById('content').innerHTML = content;
    }
    }
    }
    xmlhttp.send(null)
    return;
    }
    </script>
    </head>

    <body>
    <script>
    getPage('0');
    </script>
    <p>
    <div id="content"><b>User info will be listed here.</b></div>
    </p>
    </body>
    </html>

  56. Mikko Wuokko

    Hi.

    I’ve been hacking some extra functionality, most of which have been mentioned here too. Main thing is that it supports also inline content for the tooltip and tooltips can be used for any tag (uses class instead of id). Other is that the tooltip is wrapped inside a div which has an id of JT_linkId where the id is the tooltipped tags id. This resolves some issues when tooltips are really close to each other and mouse is move on top of them. Also I’m using the fadeOut to hide the tooltips for some extra looks.

    Check it out and use if you like.

    Even more updated jTip

  57. Very nice work, Mikko!

    Over the past couple weeks I totally rewrote the jTip, and now call it clueTip. Just haven’t had a chance to blog about it yet.

    It now follows jQuery’s plugin conventions a lot more closely, so you can just do something like this:
    $('a').cluetip({sticky:true, local:true, hoverClass:'highlight'});

    It’s still in personal “beta,” but you can see a sneak preview of it here:

    jQuery clueTip plugin

  58. Mikko

    Ok, you beat me :D

    Just started to do those things as I needed them on my own stuffs. Thought that I should share them to others too. The clueTip looks really nice. If there’s anything worthwhile on my code, please helps your self to take what ever there is.

    I encountered one issue on my plugin. I wanted to bind an event to my tooltipped tag, but it failed as the click event is returning false on tooltip tags. I needed to modify a bit the code and did this:


    $(".jTip")
    .wrap('')
    .hover(function() {
    JT_removeElements(this.id, 'fade');
    JT_show($(this).attr('href'),$(this).attr('id'),$(this).attr('name'))
    },function() {
    JT_removeElements(this.id, 'fade');
    })
    .click(function(){return false});

    to

    $(".jTip")
    .wrap('')
    .hover(function() {
    JT_removeElements(this.id, 'fade');
    JT_show($(this).attr('href'),$(this).attr('id'),$(this).attr('name'))
    },function() {
    JT_removeElements(this.id, 'fade');
    });
    $("a.jTip").click(function(){return false});

    Ok.. that is an ugly hack to get it working on non-anchor tags and leave the anchors non-linking :). You could remove the whole click-return-false part.

    Just wanted to point that kind of scenario if you haven’t encountered that before. Don’t know if the clueTip already works that way.

  59. With code that use iframes on a SSL sites, you need to set a src attribute onto a iframe for IE. Also every single jQuery plugin doesn’t have this code in place and throws up errors for people with SSL sites. Using the latest code set, I added this to Line 53:
    $(‘#JT’).prepend(”);

    blank.htm just has to have an openning and closing

  60. See my previous post to what this references.

    $('#JT').prepend('<iframe id="jTipiFrame" src="/scripts/blank.htm"></iframe>');

  61. Jon

    Hi,

    Is it possible to have this jTip version layer over existing iframes? I have a menu bar, for example (as one iframe) and I want each menu option to bring up a different tooltip (the rest of the page is another iframe).

    Thanks!

    Jon

  62. Thanks, Patrick, for the tip.

    Jon, I think it’s a matter of setting the z-index of the jTips. If it doesn’t work that way, you might want to use this in conjunction with the bgiframe plugin.

  63. John

    Thanks for all your work on this amazing tooltip.

    I was going through the posts and couldn’t come across one that mentioned that in IE6 and 7 the tooltip pops up to the very far right of the link instead of right next to it with the arrow nearly touching it.

    I figured changing the “10″ value to “320″ in the following code:


    $('#JT_' + linkId + ' #JT_arrow_left').css({left: (clickElementx - 10) + "px", top: clickElementy +"px"});

    Would move the left arrow to the correction position for IE6/7 but how would I move the tooltip and is there a way to only make this change work on IE ? Because it throws off FF/Safari/Opera.

    Thanks for any input

    John

  64. Hi John, I have good news and bad news. The bad news first: I’ve stopped supporting this plugin. Now the good news: I completely re-wrote a “tip” plugin from the ground up. It offers a lot more options, a more jQuery-ish way of handling the tips, and better positioning (thanks to the Dimensions plugin, which is required). I just posted the beta version last night: clueTip Plugin Beta.

  65. boltthrowerusa

    It works great but I have one bit problem. When tool tip display at the bottom of the page, it cuts of half of the pop-up window and there is no way i can fix it. please suggest.

    thanks

  66. Hi boltthrowerusa,
    At this point, I can only offer the same recommendation that I gave John, which is to try the clueTip Plugin instead. Sorry that I don’t have time to continue supporting the jTip plugin. If you would rather stick with jTip, you might want to visit Cody Lindley’s jTip page.

  67. Russ McClay

    Started playing around with the original jTip and it works fine. However it would validate as XHTML 1.1 because of the use of “name”. I changed that to “title” in the javascript and the link and it now validates. Cool.

  68. Russ McClay

    Started playing around with the original jTip and it works fine. However it wouldn’t validate as XHTML 1.1 because of the use of “name” in the link. I changed that to “title” in the javascript and the link and it now validates. Cool.

  69. Hi,

    I had some problems, when the link, for which I need the jTip, is in a scrollable div: When I scroll down, the offset of the tooltip is wrong.

    You should use the dimensions plugin for calculation the offsets:

    function getAbsoluteTop(objectId) {
    offset = $("#" + objectId).offset({scroll: true});
    return offset.top;
    }

    I think this will fix it (in my case it does :).

  70. Kile Lindgren

    In IE 6 the getAbsoluteLeft And getAbsoluteTop functions sometimes doesn’t calculate the correct offsets. I have updated the functions using the getBoundingClientRect() function which will correct the issue in IE.


    function getAbsoluteLeft(objectId) {
    // Get an object left position from the upper left viewport corner
    o = document.getElementById(objectId)
    if ($.browser.msie) {
    return o.getBoundingClientRect().left + (Math.max(document.documentElement.scrollLeft, document.body.scrollLeft));
    }
    oLeft = o.offsetLeft // Get left position from the parent object
    while(o.offsetParent!=null) { // Parse the parent hierarchy up to the document element
    oParent = o.offsetParent // Get parent object reference
    oLeft += oParent.offsetLeft // Add parent left position
    o = oParent
    }
    alert(oLeft);
    return oLeft
    }

    function getAbsoluteTop(objectId) {
    // Get an object top position from the upper left viewport corner
    o = document.getElementById(objectId);
    if ($.browser.msie) {
    return o.getBoundingClientRect().top + (Math.max(document.documentElement.scrollTop, document.body.scrollTop));
    }

    oTop = 0;
    if(o.offsetParent) {
    o = o.offsetParent;
    }
    while(o) { // Parse the parent hierarchy up to the document element
    oTop += o.offsetTop; // Add parent top position
    o = o.offsetParent;
    }
    return oTop
    }

  71. Hi Kile,

    Nice work on this! I’m sure it will come in handy for those who are still using the jTip plugin. In case you’re interested, I’ve written another plugin, called clueTip, that supersedes this one:

    http://plugins.learningjquery.com/cluetip/

  72. Ranjith

    A really cool stuff, that could spark up any beginners, wanting some ultimate UI inspirations …
    Thanks a lot for this post lindley !

  73. Kile, thank you so much for your addition. It just saved me a half days work :)

    To the rest of you thanks as well, of course. Great work

  74. Badu

    Is it possible to position tooltip above the link so the box and the text of the tooltip could strech upwards depending how much text is in tooltip.
    __________________
    |
    |
    | ________________|
    \/
    Link

    p.s. sory for my tarzan english :)

  75. http://fredsite.ditw.nl/index.php?page=132 –>
    Can anyone tell me why it does not work?

    Jquery included, Jtip idem. The link is on line 980 if you view source.

    many thanx.

  76. Thad

    Is there a way, when you hover over a link and the tooltip appears, that it can contain clickable links? If I try to move over the tooltip, it will disappear. Can the tooltip remain while the mouse is over it?

    Thanks! :)

  77. Hi Thad,
    I’m no longer supporting this plugin. You can try my clueTip plugin, though. Use the “sticky” option.

  78. MB

    I think this is a great plugin. I have tried using it with dynamic content for a shopping cart. I have a link that, when hovered over, shows your basket content in the tool-tip. Everything seems to work fine in FF2; however in IE7, when you add another item to your basket, the tool-tip doesn’t show the updated content of the basket like it does in FF2. Any idea how to have the dynamic content reload?
    Thank you,
    MB

  79. Naresh

    its not working when this code placed in .aspx pages. can u pls help me.

  80. The jTip plugin have problem’s with IE6 and IE7. .load function doesn’t work. The problem is caching system of IE’s. Fix here: http://toktikweb.blogspot.com/2010/01/jquery-load-problem-in-ies.html

  81. Christine

    I don’t seem to be able to download the .zip file or the seperate jtip.css and other files. Are these not supported any more? I noticed it was initially post in 2006.
    Thanks for any tips.

Sorry, but comments for this entry are now closed.