bubbletip! A jQuery Coda-style bubble tooltip plugin

Download

http://code.google.com/p/bubbletip/downloads/list

Demo page

http://uhleeka.com/demo/bubbletip/

Discuss

http://groups.google.com/group/bubbletip

Features

  • multiple tips on a page
  • multiple tips per jQuery element
  • tips open outward in four directions:
    • up
    • down
    • left
    • right
  • tips can be:
    • anchored to the triggering jQuery element
    • absolutely positioned
    • opened at the current mouse coordinates
    • anchored to a specified jQuery element
  • IE png transparency is handled via filters

Tested (lightly)

  • IE 6 on XP
  • IE 7 and 8 on Vista
  • Firefox 3.5 on Vista
  • Chrome 3.0 on Vista
  • Safari 3.2 on Vista

Examples

MOUSEOVER to open a tooltip above, below, to the left or to the right of any element.

MOUSEOVER a trigger element to open a tooltip above and below a target element.


Using it?

If you enjoy using it, I’d love to hear about it. Drop a comment with a link!

Credit

bubbletip was inspired by http://jqueryfordesigners.com/coda-popup-bubbles/.

Comments

99 Responses to “bubbletip! A jQuery Coda-style bubble tooltip plugin”

  1. commarts on November 16th, 2009 4:47 am

    Which versions of IE is this compatible with?

  2. uhleeka on November 16th, 2009 4:46 pm

    @commarts: It is lightly tested with IE 6, 7 and 8.

    As I was testing it further, I realized that there were some issues with the AlphaImageLoader not treating the paths as relative. I made a number of changes in the css and javascript to address the performance, so please check out version 1.0.2.

  3. Menno on November 22nd, 2009 9:08 pm

    Are you planning to develop a Mootools version of this?

  4. uhleeka on November 23rd, 2009 10:21 am

    @Menno: Sorry, not any time soon.

  5. Kevin on December 2nd, 2009 5:20 pm

    Very cool – thanks for making this so easy!

  6. Jason on December 3rd, 2009 7:12 pm

    Awesome plugin!

    Quick question.. is is possible to make the script activation dynamic? i.e. sort of incorporating this http://www.learningjquery.com/2009/12/simple-tooltip-for-huge-number-of-elements

    I've tried the following:
    $('a.popup').live('mouseover', function() {
    $('#' + this.id).bubbletip('#' + this.id + '_popup');
    });

    With the following html:
    <a href="#" rel="nofollow">Show me 1</a>
    <a href="#" rel="nofollow">Show me 2</a>

    <a href="#" rel="nofollow">Show me 99</a>

    <div id="1_popup">Content for 1</div>
    <div id="2_popup">Content for 2</div>

    <div id="99_popup">Content for 99</div>

    and it does work on the first mouseover, but all consecutive attempts are wonky (possibly something to do with the timeout).

    Any ideas?

  7. uhleeka on December 4th, 2009 5:27 pm

    @Jason:

    basically, the problem is that every time you mouseover your anchor, the .bubbletip function is creating a new tip and stealing the “content” from any previously created tips…hope that makes some sense.

    so to combat that, you only want to call the .bubbletip function if the tip “content” has not already been injected into a bubbletip (i.e not a descendant of a “table.bubbletip”):

    $('a.popup').live('mouseover', function() {
        if ($('table.bubbletip #' + this.id + '_popup').length == 0) {
            $('#' + this.id).bubbletip('#' + this.id + '_popup').trigger('mouseover');
        }
    });

    note the .trigger('mouseover') makes the popup show the first time you mouseover. not sure if that will have issues if the bubbletip doesn't load fast enough.

    another thing to note is that there is no reuse of the bubbletip container. so if you have a thousand a.popup links on your page, you could potentially end up with a thousand bubbletip containers. i've no idea how well that would perform.

    hope that helps!

  8. Robert Jakobson on December 4th, 2009 7:25 pm

    Probably the sexiest thing on the internet, sincerely.

  9. Ole Bülow on December 5th, 2009 8:27 am

    Can someone tell me why this doesnt work:

    <script type="text/javascript">
    $(window).bind('load', function() {
    $('#a1_up').bubbletip('#tip1_up');
    $('#a2_up').bubbletip('#tip2_up');
    $('#a3_up').bubbletip('#tip3_up');
    $('#a4_up').bubbletip('#tip4_up');
    $('#a5_up').bubbletip('#tip5_up');
    });
    </script>

    <div class="connect">
    <div class="email"><img src="img/connect_email.png" alt="email" id="a1_up" /><div id="tip1_up" style="display:none;"><pre class"tip1">test1</pre></div></div>
    <div class="vimeo"><img src="img/connect_vimeo.png" alt="vimeo" id="a2_up" /><div id="tip2_up" style="display:none;"><pre class"tip2">test2</pre></div></div>
    <div class="flickr"><img src="img/connect_flickr.png" alt="flickr" id="a3_up" /><div id="tip3_up" style="display:none;"><pre class"tip3">test3</pre></div></div>
    <div class="twitter"><img src="img/connect_twitter.png" alt="twitter" id="a4_up" /><div id="tip4_up" style="display:none;"><pre class"tip4">test4</pre></div></div>
    <div class="facebook"><img src="img/connect_facebook.png" alt="facebook" id="a5_up" /><div id="tip5_up" style="display:none;"><pre class"tip5">test5</pre></div></div>
    </div>

    No matter how i make it its only the last div working (facebook)

    Im staring blind at it right now :(

  10. vinay on December 6th, 2009 8:06 pm

    Hi your modified bubble tool tip is too good it solve my big problem
    Thanks a lot.

    Vinay Joshi
    Brainofast Technologies
    http://www.brainofast.com

  11. uhleeka on December 7th, 2009 9:33 am

    @Robert, @Vinay: Thanks!

    @Ole: I cut and paste your code and it works as expected. Could something else on the page be breaking?

  12. Ole Bülow on December 8th, 2009 12:08 am

    uhleeka, sorry i made some css positioning errors (relative/absolute) – fixed it now and it WORKS!! :o) Love your script :o)

  13. uhleeka on December 8th, 2009 12:55 am

    @Ole: thanks!

  14. Turan Sadri on December 8th, 2009 8:55 am

    Hi,

    Is this script easily modified so that it triggers on mouse click instead of mouseover?

    I changed this row:
    $([_wrapper.get(0), this.get(0)]).mouseover(function(e) {

    to this:
    $([_wrapper.get(0), this.get(0)]).click(function(e) {

    Now it opens on mouse click, but I'd need to add a button from where to close it. Could you help me out with this?

  15. uhleeka on December 8th, 2009 12:29 pm

    @Turan:

    Basically, you need to have your close button call the "mouseout" function. So you'd need to expose a handle to that function.

    That is a bit outside of the current intention/scope of the plugin, though. So, I don't see it being something easily integrated.

  16. Turan Sadri on December 9th, 2009 6:13 am

    Thanks! Actually I got this working quite easily. As I needed both functionalites mouseover triggered and click triggered bubbletip I added one more option called triggerType with default value being 0. When value is 0 I use the normal .mouseover/.mouseout events, but when value is changed to 1 it uses .click() instead of .mouseover/.mouseout. Works like a charm!

    Thanks a lot for this script, really helped me on my project!

    One more thing. Did you know that when resizing the browser window and hovering mouse cursor over the hidden tooltip tables they come visible for some reason.

    I removed this line from the script's window resize handler and now it works properly.
    _wrapper.show();

    I tested on different browsers and seems like it doesn't do any harm to remove this line. Just wanted you to know!

    Once again, thanks a lot!

  17. uhleeka on December 9th, 2009 11:13 am

    @Turan: Glad to hear you got it working! Thanks for the _wrapper.show() fix. I posted it to version 1.0.3. I also added a couple options, bindShow and bindHide, so that you can assign any events (e.g. focus and blur are good for inputs). I think that should work for your ‘click’ events as well…but I haven’t yet had a chance to test.

    latest demo is at http://www.uhleeka.com/demo/bubbletip/

    Thanks again!

  18. nicmare on December 10th, 2009 5:42 am

    is it possible to get the tip content from the title attribute of the trigger? i tried this:
    $('.windows').bubbletip('.windows[rel]');
    <a href="#" class="windows" title="Download for XP, Vista, Win7">Download</a>
    but anchor is now invisible?!?!

  19. nicmare on December 10th, 2009 5:42 am

    damn it, i mean $('.windows').bubbletip('.windows[title]');

  20. nicmare on December 10th, 2009 11:28 pm

    title = $(this).attr("title");
    $('.windows').bubbletip(title);
    this also does not work!! :(

  21. nicmare on December 10th, 2009 11:40 pm

    $('.apple').bubbletip($(this).attr("title"));
    with this just a empty bubble :(

  22. Michael on December 11th, 2009 6:13 am

    would it be possible to 'unbind' bubbletip functionality?
    i am not talking just hiding the tip, but dynamically removing the functionality.
    thanks!

  23. uhleeka on December 11th, 2009 10:24 am

    @nicmare: version 1.0.3 does not support using the title attribute.

  24. nicmare on December 13th, 2009 4:05 am

    what a pity! please implement it in next version as a option. it makes semantically more sense than using a extra div. but sometime a div is better if you need more html tags (which are not allowed within titel attr). so both would be great! thanks in advance!

  25. Brian on December 14th, 2009 8:02 am

    Hi,
    I wonder if there is any way to delay the activation of the bubbletip – so the mouse must remain over the element for a specified time?

    There is: mouseoutDelay: 150

    I tried: mouseoverDelay: 150

    this did not work. I just want to delay the activation for a moment so the bubbletip doesn't activate immediately.

    Thanks! great plugin!

  26. uhleeka on December 14th, 2009 2:59 pm

    @Michael: thanks! i added (v1.0.4) a function to remove the bubbletip. if no argument is supplied, all tips bound to the element will be removed.

    $(triggerElement).removeBubbletip([optional array of $(tips) to remove]);

  27. uhleeka on December 14th, 2009 3:02 pm

    @Brian: in v1.0.4, i renamed the option.mouseoutDelay to option.delayHide. i also added the option.delayShow with a default integer value of "0". check out the trigger example on the demo page @ http://uhleeka.com/demo/bubbletip/. thanks!

  28. Brian on December 14th, 2009 7:32 pm

    Hi Uhleeka,
    thanks! that's awesome. I'll grab the update. Super!

  29. Joe on December 16th, 2009 2:12 pm

    Is there a way to use this with an imagemap? It would be ideal as a demonstration tool, but I've been unable to trigger it map hotspots.

    Thanks. It's the cleanest tooltip plug-in I've found!

  30. uhleeka on December 16th, 2009 6:40 pm

    @Joe: you could do something like…

    <script type="text/javascript">
    $(window).bind('load', function() {
    $('#area1').bubbletip($('#tip1'), {});
    });
    </script>
    <img usemap="#mymap" src="images/myimagemap.png" id="img1">
    <map name="mymap" id="mymap">
    <area shape="rect" coords="…" href="…" id="area1" />
    </map>
    <div id="tip1" style="display:none;">this is the tip</div>

    but…i am doubtful that the position of the tip is going to work. you may have to absolutely (relative to the chosen edge of your image) position your tips–e.g.
    <script type="text/javascript">
    $(window).bind('load', function() {
    $('#area1').bubbletip($('#tip1'), { positionAtElement: $('#img1'), offsetTop: 100, offsetLeft: 100 });
    });
    </script>
    Note that the offset of 100,100 is relative to the fact that the tip is opening up (the offset 0,0 would be the center of the top edge of the image)…hope that helps!

  31. Tyler Rasmussen on January 6th, 2010 10:45 am

    I'm trying to use bubbletip in conjunction with jquery ui tabs. Check out http://tyler.rasmussen.name.s80883.gridserver.com/dts-popup.html and mouseover quick stats. Any idea why the bubbletip position is thrown so far off?

  32. uhleeka on January 6th, 2010 1:15 pm

    @Tyler: I think it has to do with the fact that you are calling $('#tabs').tabs() potentially after you handle the tip. That function modifies the width/height of the tip contents, so the initial tip dimensions get incorrectly calculated. I'm pretty sure that you would want to call that within a $(document).ready anyhow. So try something like:

    $(document).ready(function() {
    $("#tabs").tabs();
    $('#about').bubbletip($('#about_tip'));
    $('#degrees').bubbletip($('#degrees_tip'));
    $('#apply').bubbletip($('#apply_tip'));
    });

    Hope that helps.

  33. Geoff on January 9th, 2010 2:40 pm

    Very nice plugin. Just a quick FYI. I did a small facebook style menu at the bottom of the page on one of my websites, fixed positioning. This plugin didnt work for that and i had to modify it to recalcuate initial values on each mouseover. If the page was scrolled, the tip was appearing in the old position all the time. Thankfully it was simply a matter of calling _Calculate on each mouseover event (or whichever event is passed in the options). You need to make sure though that e.currentTarget.nodeName is not equal to TABLE.

  34. uhleeka on January 11th, 2010 10:56 am

    @Geoff: thanks for the info. my apologies, i've done almost no testing with fixed positioning.

    alternatively, you could bind the _calculate function to the scroll event. glad to hear you got it working, though.

  35. jay on January 12th, 2010 5:13 pm

    Hi. Just found this and it seems great – tho I'm not extremely versed in jquery as yet… from Geoff's comment and your reply, how would i bind the _calculate function to calcuate initial values on each mouseover…

    i'm trying to use this with a carousel where only 3 or so entries would be visible at a time…

    thanks

  36. uhleeka on January 12th, 2010 6:09 pm

    @jay: not having done any sort of testing… modify the code at line 175 to:

    var animation;
    _Calculate(); // add this line
    if (_options.positionAt.match(/^element|body$/i)) {

  37. jay on January 13th, 2010 1:02 am

    thanks! that worked great! appreciate that!

  38. TNP on January 18th, 2010 10:46 am

    I have a div that I'm moving to different locations on the screen. Everytime it moves, the tip needs to move with it (using CSS position: absolute and changing position with css("left", x) and css("top", y)). Think of a cartoon agent character moving to different locations of the screen explaining different controls with a tooltip.

    The first time I call agent.removeBubbletip(hint) it works fine. Then after the character moves, I call agent.bubbletip(hint) and the tip displays in a new location. But then when I call agent.removeBubbletip(hint) again the script crashes on line 344:

    $("#" + tipsActive[i][0]).get(0) is undefined
    [Break on this error] elem = $('#' + tipsActive[i][0]).get(0).parentNode;\r\n

    If I don't call removeBubbletip() I end up with stale empty tips all over the place. I tried to debug your function but didn't understand the purpose of the .data('bubbletip_tips') and why it wasn't being updated after removing tips, nor why tips were being appended to the body and hidden. I have cheated in the meantime by setting $(this).data('bubbletip_tips', null); but I'm not sure what the proper code should be :)

  39. Mario Peshev on January 18th, 2010 1:14 pm

    Hello there, great plugin, thanks for that. :) Tested here with IE 6/8 on Windows and Firefox 3.x on Windows/Linux. Unfortunately have some issues with Crome 4 under Linux – your demo site has some offset/padding issues ('above' bubble pops up above the link, for instance). I have implemented your code in one of my projects and it's working like charm under IE/FF, but it's not responsive with Chrome.

  40. Tyler Rasmussen on January 19th, 2010 9:04 am

    Does bubbletip work with jQuery 1.4?

  41. Ricky on January 19th, 2010 9:17 am

    Hi,

    Great plugin, works brilliantly, thanks! :)

  42. uhleeka on January 20th, 2010 1:36 pm

    @TNP: i fixed a couple things that weren't working in the $.fn.removeBubbletip function. also, i added option.calculateOnShow (default is false); if you set it to true, it will recalculate the position of the tip just prior to making the tip visible.

    both fixes are in version 1.0.5 @ http://code.google.com/p/bubbletip/

  43. uhleeka on January 20th, 2010 1:45 pm

    @Mario: I haven't done much testing on linux, but I do see the issue you are talking about on chrome. It doesn't always reproduce for me, though, so i am having a hard time tracking it down. One thing you might try is to set option.calculateOnShow = true.

    thanks!

  44. uhleeka on January 20th, 2010 1:47 pm

    @Tyler: seems to. i tested (version 1.0.5 is new as of today) on windows using IE6+, FF3.5, Safari4.0 and Chrome3.0

    thanks.

  45. uhleeka on January 20th, 2010 1:47 pm

    @Ricky: thanks!

  46. TNP on January 25th, 2010 12:43 pm

    Thanks for checking that out uhleeka; the new code works perfectly! :)

  47. Lukas on January 28th, 2010 6:06 am

    Is it possible to make this plugin unobtrusive? Basically so I can place all my JS into an 'application.js' file instead of including <script></script> tags in my HTML. Currently, when I try this, I get an error:
    "$(tip).get(0) is undefined" from line 34.
    It would be really helpful to have that fixed. I'm looking into it and may submit a patch.

  48. Lukas on January 28th, 2010 6:21 am

    Basically it looks like you just need to add:
    if ($(tip).get(0) == null) {
    return false;
    }

    at the beginning of the "bubbletip: function(tip, options)" method.

    Maybe for a future release?

  49. uhleeka on January 28th, 2010 9:50 am

    @Lukas: Given that this plugin requires css, IE specific css and images, I don't see how it can be set up to be any more "unobtrusive". I am open to suggestions.

    Regarding your [ if($(tip).get(0) == null) ], that should never occur. If $(tip).get(0) is null, then you have no tip. In my opinion, if you specify a tip that does not exist, the code should error, not ignore.

  50. James on January 30th, 2010 6:40 am

    I've been staring at the code for a good few hours and just can't work this out… The popup shows perfectly if the page width doesn't extend past 100%, but if it does, firstly it gets the position wrong (but this is corrected by setting calculateOnShow to true so not a problem) but also the popup comes up about half of the correct width, with no left/right border.

    This is on firefox, it works perfectly with IE8. Any ideas? (if what I said makes sense!)

  51. uhleeka on January 31st, 2010 9:55 am

    @James: Can you post your code?

  52. Oscar Marcelo on February 1st, 2010 8:30 pm

    Hey! Congratulations for this plugin! It's very usefull for me!
    I have a question. How can I do a close button?

  53. janne on February 3rd, 2010 12:35 pm

    Great work! I think I found a weird behaviour in FF3.5 for Mac. The "fade out" animation always trigged the "fade in" aniamtion if you moved the mouse just (not much) outside the mouse over area. The result was a jumping bubble.

    In a rush of hubris I took the liberty to change line 186 with a dirty fix and remove the .stop(). Why is it there? I mean the "fade out" animation should not stop at no costs. Or have I missed something?

    if (_isHiding) {
    _isActive = false;
    return;
    }

    Again, as someone said, this is the sexiest thing on Internet ;-)

    // Jan

  54. uhleeka on February 4th, 2010 10:09 am

    @janne: Thanks for the comments!

    The .stop(true, false) is there to stop any "hiding" animation. Basically, if the bindShow event fires during the hiding animation, we want to stop hiding, and start showing again. If you change the code as you suggest, you will not be able to show the tip until it is done hiding, i.e. you could end up over the trigger while the tip remains hidden.

    I'm not sure what is causing the "jumping bubble" effect that you are seeing (sorry i don't have a mac). Are you doing a negative offset? If you want to post your code, i'd be glad to take a look.

    Thanks!

  55. uhleeka on February 4th, 2010 10:14 am

    @Oscar: Thanks for the feedback. I don't see an easy way to do a close button at the moment. I'll try to add that as a feature for the next release.

  56. uhleeka on February 4th, 2010 10:18 am

    @janne: Alternatively, if you set the .delayShow to be greater than the .animationDuration, the if(_isHiding) [line 182] will always evaluate to false and thus the .stop(true,false) will never fire…I think.

  57. janne on February 4th, 2010 1:12 pm

    I knew the .stop() was there for a reason. I have done a screen capture (on FF3.6 for Mac)for you so you can see the effect I am talking about. I can reproduce it on your example code on your site. It's in Mp4-format hope you can watch it.

    http://dl.dropbox.com/u/1066320/JumpingBubbletip.m4v

  58. gunther on February 6th, 2010 9:30 am

    Hi.. i have a problem.. when i put a text whit 2 lines.. the bubble show ok.. but if the text have more lines.. appear a white space in the left side.. check this img.. hw i can solved?

    http://yfrog.com/i3screensnapzp

  59. Enrico on February 8th, 2010 5:26 am

    Hello, thank you for the great tool.
    Please have you a PSD (photoshop file) of the bubbletip? I want to modify the graphic and, if possible, I kindly ask you the file.

    Thank you
    Enrico

  60. uhleeka on February 8th, 2010 11:14 am

    @janne: Thanks for the screen capture. I do see the problem in FF (and conceptually in the other browsers as well).

    To prevent it, during the .bindShow event while _isHiding = true, you'd have to check and see if the current mouse coordinates are in the path of the hiding tip: if they are, then exit the .bindShow (allowing the hiding animation to complete); otherwise allow the .bindShow to complete.

    I will take a look at including it in a future release. Thanks again!

  61. uhleeka on February 8th, 2010 11:19 am

    @gunther: are you adding the text of the tip dynamically? the plugin works by calculating the width and height during the domready event, so if you change the text after the calculation has been done, you might run into the problem you describe.

    if that is the case, you could set the option .calcuateOnShow = true to have the width/height adjusted every time the tip is shown.

    hope that helps!

  62. uhleeka on February 8th, 2010 11:20 am
  63. MarcelloP on February 9th, 2010 3:36 am

    Hi!
    It is possible to display a bubbletip immediately on $(document)ready ?
    I mean, without an event binding to activate the bubbletip, 'cause I need to show a bubbletip immediately after the page has been loaded…

    Also, I have a suggestion: can you use an image sprite for all the images?

    Thanks

  64. uhleeka on February 9th, 2010 9:45 am

    @marcello: you could try setting the .bindShow and .bindHide to a custom event, then call a .trigger('yourCustomShowEvent') at domready.

    regarding the image sprite, (to my knowledge) IE cannot do an image sprite because of the alpha filtering. all other browsers should be loading three images at most. there are three different sprites because one has to be stretched horizontally and one vertically. if you know of a better way, i am open to suggestions.

    thanks.

  65. Kevin on February 9th, 2010 11:36 am

    Is there a way to trigger (i.e. show) a bubbletip via a javascript function.
    Ex: something like $(triggerElement).showBubbletip()

  66. uhleeka on February 10th, 2010 3:26 pm

    @Kevin: You could set your own custom event for .bindShow and then trigger that custom event. something like:

    { bindShow : 'myCustomShowEvent' }

    $(triggerElement).trigger('myCustomShowEvent');

    thanks.

  67. Kevin on February 11th, 2010 4:13 am

    Thanks uhleeka. That did the trick.

  68. daniel on February 12th, 2010 12:10 pm

    Greetings!
    Beautiful plugin, thank you so much!

    I have implemented the plugin (1.0.5) and it works well in every browser I've tested except for IE 6,7,8 where there seems to be a padding issue with the bubbletip – the border images are exploding outward from the div. (http://www.china360online.org/confucius-learning-rites)

    I would appreciate any suggestions. Thanks in advance!

    Best,

  69. uhleeka on February 13th, 2010 9:19 pm

    @daniel: Looks like you are missing the IE-only stylesheet.

    Also, i think you have declared two different versions of jQuery in your header. Not sure if that is a factor, but you probably want to fix that anyway.

    thanks.

  70. Gokhan on February 14th, 2010 1:15 am

    Hi,

    Looks beautiful. Is it possible to change the license to LGPL? There's a confusion on whether GPL can be used on a website without opening the source to the world. I want to use it on my site but can't make sure if I'll be in legal trouble.

    Cheers.

  71. daniel on February 15th, 2010 7:03 am

    greetings uhleeka, thanks very much for your prompt response – I have linked the ie stylesheet. thanks again for your support and this great tool.

    all the best,

  72. Alexis on February 17th, 2010 6:26 am

    Hi! Thanks very much. I really liked the script. In fact, I used it as a label on my home page (a main attraction). :)

    http://prepress.ph/

    I'm sure to include you in my acknowledgements.

    More power!

  73. uhleeka on February 17th, 2010 12:11 pm

    @Gokhan: I have no problem changing it. I'm not sure when I am going to post the next version, though.
    @Alexis: Thanks!

  74. Serban on February 19th, 2010 5:17 am

    Hello uhleeka,

    Thank you for this great plugin! Excellent work!

    I have a small request. I want to style the bubble, and change it's design. I noticed the PSD bubbletip-1.0.1.psd but this is not sliced with all the .png pieces so it's very hard to create a new design. (ex. obtaining bubbletip-L-R.png slice from the .psd).

    Could you please be so kind to upload a sliced PSD with all the names mapped on the PSD slices? Thanks!!

  75. Enrico on February 22nd, 2010 6:42 am

    Thank you

  76. uhleeka on February 22nd, 2010 11:24 am

    @Serban: i'll see if i can do that with the next release. not sure when that will be, tho.

  77. Matt on February 23rd, 2010 2:03 pm

    Thanks for the amazing work! One problem i notice is when i have any extra space/formatting for example, an unordered list. i.e.:

    <pre class="tip">
    <ul>
    <li>list 1</li>
    <li>list 2</li>
    </ul>
    </pre>

    i get extra spaces shown in my bubble above and below each entry. i.e.:

    list 1

    list 2

    This becomes fixed if i cram everything together. i.e.:

    <pre class="tip"><ul><li>list 1</li><li>list 2</li></ul></pre>

    ie: shows correctly, no spaces as:

    list 1
    list 2

    Is there anyway I can fix this, so I can format my source code neatly? Rather than eliminate all spaces inside my div?

    Thanks,
    Matt

  78. uhleeka on February 23rd, 2010 5:52 pm

    @Matt: i think that is a factor of using the <pre> tag. try using a div instead of the pre.

  79. Serban on February 23rd, 2010 9:51 pm

    @Matt were you experience that kind of spaces in FF or IE? I only encountered them in IE7 and 8.

  80. James Helms on February 27th, 2010 10:59 am

    uhleeka, first thank you for this excellent script. I first used Jquery for designs version and it worked well, except I was encountering a ton of CSS conflicts which brought me here.

    Now here I am running into some issues using the script with multiple "dynamic" elements.

    I noticed your post here: Jason on December 3rd, 2009 7:12 pm

    But it does not really help in my situation, I was hoping maybe you could take a look at the following code and provide your idea for how to solve the problem at hand.

    This is part of the code: (As you can see I changed the "a href" to a div which still works well. And below the code added the closing div. The code below places images on my site and below that is code to pull certain fields from the database to be displayed. The first tooltip works great. Unfortunately only one works)

    echo '<div id="a1_right">';

    // Image
    if( $show_listing_image ) {
    echo '<br/>';
    if ( $show_rank == 1 ) echo "&nbsp;&nbsp;&nbsp;&nbsp;";
    echo '<a href="' . $l->link . '">';
    if ($l->image_path) {
    echo '<img align="bottom" border="0" src="'. $l->image_path . '" ';
    if (($image_width !='0') AND ($image_width !='') AND ($image_height !='0') AND ($image_height !='')) echo 'width="'.$image_width.'" height="'.$image_height.'"';
    echo ' alt="' . $l->link_name . '" title="' . $l->link_name . '" />';
    } else { //if ( $show_images )
    echo '<img align="bottom" border="0" src="'.$mtconf->getjconf('live_site').$url_default_image.'" ';
    if (($image_width !='0') AND ($image_width !='') AND ($image_height !='0') AND ($image_height !='')) echo 'width="'.$image_width.'" height="'.$image_height.'"';
    echo ' alt="' . $l->link_name . '" title="' . $l->link_name . '" />';
    }
    echo '</a>';
    }

    echo '</div>';

    Any ideas would be helpful, keep in mind I have limited JS knowledge. More of a cut and paste, try it out kind of person.

    Demo: http://www.industrialjobs.org/development/

    Thanks,
    James

  81. Anastasia on March 3rd, 2010 2:19 pm

    I was hoping you could help me. I have a table with a link in each row. After each link, I have a <div class="popup">Unique popup text</div>. I am hiding all popups with simple css: .popup { display:none; }

    I have been using aqLayer plugin to show the popups when someone hovers over the links using the following code:

    $('#mytable td.url').hover(
    function() {
    $(this).aqLayer({ opacity: 1, layerCss: {…} });
    $(this).aqLayer( $(this).children('.popup').html() );
    },
    function() {
    $(this).aqLayer('hide');
    }
    );

    And now I am trying to do the same thing using the BubbleTip, but is looks like it's not working with any popup that does not have a unique ID assigned to it. Here is the code I am trying to use:

    $('#mytable td.url').hover(
    function() {
    $(this).bubbletip($(this).children('.popup').html(), { deltaDirection:'right' } );
    },
    function() {
    $(this).removeBubbletip();
    }
    );

    If I replace $(this).children('.popup').html() with $('#tip1'), which is a dummy popup with id tip1, then the code works and is showing this dummy popup for all the links in the table. Am I missing something or is there no way to display popups that don't have an id assigned? Is there maybe a workaround?

  82. Cameron on March 9th, 2010 8:11 am

    I am wondering if it is possible to have/fake dynamic positioning? I would like the bubbletip to default to down (easy enough) but if the triggering content is at the bottom of the page then pop up instead of down so that the bubble tip is still on the page. Pop to the left if the content is too far right and pop right if the content is too far the the left. Having the bubbletip partially off of the page is not ideal.

    The site is still in development so I don't have a URL for you.

    Thanks
    -Cam

  83. Cameron on March 10th, 2010 6:12 am

    I had posted yesterday about having the bubbletip be dynamically placed. I have been tinkering with it and have come up with part of the solution. Thought I would pass it along in case you were interested.

    replaced:
    /* create the wrapper table element
    if (_options.deltaDirection.match(/^up$/i)) {
    _wrapper = $('<table class="bubbletip" cellspacing="0" cellpadding="0"><tbody><tr><td class="bt-topleft"></td><td class="bt-top"></td><td class="bt-topright"></td></tr><tr><td class="bt-left"></td><td class="bt-content"></td><td class="bt-right"></td></tr><tr><td class="bt-bottomleft"></td><td><table class="bt-bottom" cellspacing="0" cellpadding="0"><tr><th></th><td><div></div></td><th></th></tr></table></td><td class="bt-bottomright"></td></tr></tbody></table>');
    } else if (_options.deltaDirection.match(/^down$/i)) {
    _wrapper = $('<table class="bubbletip" cellspacing="0" cellpadding="0"><tbody><tr><td class="bt-topleft"></td><td><table class="bt-top" cellspacing="0" cellpadding="0"><tr><th class="left"></th><td><div></div></td><th class="right"></th></tr></table></td><td class="bt-topright"></td></tr><tr><td class="bt-left"></td><td class="bt-content"></td><td class="bt-right"></td></tr><tr><td class="bt-bottomleft"></td><td class="bt-bottom"></td><td class="bt-bottomright"></td></tr></tbody></table>');
    } else if (_options.deltaDirection.match(/^left$/i)) {
    _wrapper = $('<table class="bubbletip" cellspacing="0" cellpadding="0"><tbody><tr><td class="bt-topleft"></td><td class="bt-top"></td><td class="bt-topright"></td></tr><tr><td class="bt-left"></td><td class="bt-content"></td><td class="bt-right-tail"><div class="bt-right"></div><div class="bt-right-tail"></div><div class="bt-right"></div></td></tr><tr><td class="bt-bottomleft"></td><td class="bt-bottom"></td><td class="bt-bottomright"></td></tr></tbody></table>');
    } else if (_options.deltaDirection.match(/^right$/i)) {
    _wrapper = $('<table class="bubbletip" cellspacing="0" cellpadding="0"><tbody><tr><td class="bt-topleft"></td><td class="bt-top"></td><td class="bt-topright"></td></tr><tr><td class="bt-left-tail"><div class="bt-left"></div><div class="bt-left-tail"></div><div class="bt-left"></div></td><td class="bt-content"></td><td class="bt-right"></td></tr><tr><td class="bt-bottomleft"></td><td class="bt-bottom"></td><td class="bt-bottomright"></td></tr></tbody></table>');
    }

    with:
    // unified HTML blob
    _wrapper = $('<table class="bubbletip btDir-' + _options.deltaDirection + '" cellspacing="0" cellpadding="0"><tbody><tr><td class="bt-topleft"></td><td class="bt-top"></td><td class="dirDown"><table class="bt-top" cellspacing="0" cellpadding="0"><tr><th class="left"></th><td><div></div></td><th class="right"></th></tr></table></td><td class="bt-topright"></td></tr><tr><td class="bt-left"></td><td class="bt-left-tail dirRight"><div class="bt-left"></div><div class="bt-left-tail"></div><div class="bt-left"></div></td><td class="bt-content"></td><td class="bt-right"></td><td class="bt-right-tail dirLeft"><div class="bt-right"></div><div class="bt-right-tail"></div><div class="bt-right"></div></td></tr><tr><td class="bt-bottomleft"></td><td class="bt-bottom"></td><td class="dirUp"><table class="bt-bottom" cellspacing="0" cellpadding="0"><tr><th class="left"></th><td><div></div></td><th class="right"></th></tr></table></td><td class="bt-bottomright"></td></tr></tbody></table>');

    This contains all of the differences between each direction that the bubble tip can be placed in a single blob. It also adds the direction as part of the CSS in the blob.

    The CCS file (sorry it is my working copy so it has other changes in here as well)

    /*******************************/
    /********* bubbletip ***********/
    /*******************************/
    .bubbletip
    {
    position: absolute;
    z-index: 50;
    border-collapse: collapse;
    }
    .bubbletip td.bt-topleft
    {
    background: transparent url(bubbletip.png) no-repeat scroll 0px 0px;
    height: 33px;
    width: 33px;
    }
    .bubbletip td.bt-top
    {
    background: transparent url(bubbletip-T-B.png) repeat-x scroll 0px 0px;
    height: 33px;
    }
    .bubbletip td.bt-topright
    {
    background: transparent url(bubbletip.png) no-repeat scroll -73px 0px;
    height: 33px;
    width: 33px;
    }
    .bubbletip td.bt-left-tail div.bt-left, .bubbletip td.bt-left
    {
    background: transparent url(bubbletip-L-R.png) repeat-y scroll 0px 0px;
    width: 33px;
    }
    .bubbletip td.bt-left-tail div.bt-left-tail
    {
    background: transparent url(bubbletip.png) no-repeat scroll 0px -33px;
    width: 33px;
    height: 40px;
    }
    .bubbletip td.bt-right-tail div.bt-right, .bubbletip td.bt-right
    {
    background: transparent url(bubbletip-L-R.png) repeat-y scroll -33px 0px;
    width: 33px;
    }
    .bubbletip td.bt-right-tail div.bt-right-tail
    {
    background: transparent url(bubbletip.png) no-repeat scroll -73px -33px;
    width: 33px;
    height: 40px;
    }
    .bubbletip td.bt-bottomleft
    {
    background: transparent url(bubbletip.png) no-repeat scroll 0px -73px;
    height: 33px;
    width: 33px;
    }
    .bubbletip td.bt-bottom
    {
    background: transparent url(bubbletip-T-B.png) repeat-x scroll 0px -33px;
    height: 33px;
    }
    .bubbletip td.bt-bottomright
    {
    background: transparent url(bubbletip.png) no-repeat scroll -73px -73px;
    height: 33px;
    width: 33px;
    }
    .bubbletip table.bt-top, .bubbletip table.bt-bottom
    {
    width: 100%;
    }
    .bubbletip table.bt-top th.left
    {
    width: 10px;
    }
    .bubbletip table.bt-top th.right
    {
    width: 90%;
    }
    .bubbletip table.bt-top th
    {
    background: transparent url(bubbletip-T-B.png) repeat-x scroll 0px 0px;
    height: 33px;
    }
    .bubbletip table.bt-bottom th
    {
    background: transparent url(bubbletip-T-B.png) repeat-x scroll 0px -33px;
    }
    .bubbletip table.bt-bottom th.left
    {
    width: 10px;
    }
    .bubbletip table.bt-bottom th.right
    {
    width: 90%;
    }
    .bubbletip table.bt-top td div
    {
    background: transparent url(bubbletip.png) no-repeat scroll -33px 0px;
    width: 40px;
    height: 33px;
    }
    .bubbletip table.bt-bottom td div
    {
    background: transparent url(bubbletip.png) no-repeat scroll -33px -73px;
    width: 40px;
    height: 33px;
    }
    .bubbletip td.bt-content
    {
    background-color: #fff;
    vertical-align: middle;
    }
    /*******************************/
    /*** unified html ***/
    /*******************************/
    .dirDown, .dirUp, .dirRight, .dirLeft
    {
    display: none;
    }
    .btDir-down .dirDown,
    .btDir-up .dirUp,
    .btDir-right .dirRight,
    .btDir-left .dirLeft
    {
    display: block;
    }
    .btDir-down td.bt-top,
    .btDir-right td.bt-left,
    .btDir-left td.bt-right,
    .btDir-up td.bt-bottom
    {
    display: none;
    }

    /*******************************/

    As you can see the CSS hides the bits and pieces that are not needed depending on the directionality of the bubbletip (as determined by the additional CSS class on the bubbletip wrapper).

    I then set 'calculateOnShow' on and hacked on the _Calculate() function. The _Calculate function will do its thing, if the bubble is off the page then it will change the direction and re-call itself. Which causes the bubbletip to appear on the page.I am still tweaking this function. I can send it along once it is done.

    Let me know if you are interested in this code and I will send it by email or something – a blog doesn't seem like the right forum to be sending big slabs-o-text around with.

    -Cam

  84. Justin on March 11th, 2010 2:39 am

    hi uhleeka, great job on the code, it's very helpful.

    i'm running into a strange issue where the first time i load my test page, all of the positioning is off by around 300px down and right. the problem persists if i reload, but if i click on my name (which just links back to the same page), the problem disappears. any thoughts? i've seen it happen on both firefox and safari. the link is http://www.justinlau.ca/bubbletest.html

    thanks!
    -justin

  85. uhleeka on March 11th, 2010 1:18 pm

    @Justin: try setting the bubbletips in a $(window).bind('load', function() {}); instead of the $(document).ready. Seems like the positioning might be due to the page not rendering completely prior to the tip positions being calculated. alternatively, you could set the { calculateOnShow: true } option.

  86. justin on March 12th, 2010 1:04 pm

    works like a charm, thanks!

  87. James on March 13th, 2010 5:36 am

    Sorry about taking a couple of months to reply, I had a massive PC fail!

    I have created a demo of what I am seeing which can be found at http://www.jprestwood.plus.com/bubble/ you want to mouseover the cells that have the red triangle on :)

    I have noticed that IE 7/8 seem to render it fine and put the popup in the right place (as long as calculateOnShow:true is set), FF3.6 renders it in the right place but shows half the box, FF3.5/Opera/Chrome all show the box in the wrong position, just like what Justin is reporting but I see it up and right and mousing over a few times sometimes will put it in the right place, for that time only.

    Thanks for your help :)

  88. uhleeka on March 15th, 2010 11:41 am

    @James: Hey James, i had already stumbled on the positioning problem you described. the code was using _wrapper.width() and .height() instead of .outerWidth() and .outerHeight(), so the margin/padding was not being factored in when positioning the tips.

    regarding the FF3.6 issue, it seems like an erroneous change on Mozilla's part, but the hack to fix it was as simple as setting the width and height on the _wrapper:

    _wrapper.css({ 'width': _wrapper.width(), 'height': _wrapper.height()});

    it doesn't make sense why FF3.6 requires that, but oh well.

    i posted an update @ http://code.google.com/p/bubbletip/

    thanks!

  89. James on March 15th, 2010 12:19 pm

    @uhleeka: I seriously could kiss you right now! That works perfectly!

  90. Sunny on March 15th, 2010 3:42 pm

    Hi uhleeka, thanks for the great script. My problem is regarding when Bubbletip is inside a dynamic loop. Here's my code snippet:

    $(document).ready(function() {
    $('img[id^=Tooltip]').bubbletip($('#Tooltip_Content_'+$(this).attr('name')));
    });

    Inside a while loop…
    <div id="Tooltip_Content_<?= $row['id'] ?>" style="display:none;"><?= $row['value'] ?></div>

    And…
    <img src="icon.gif" id="Tooltip_<?= $row['id'] ?>" name="<?= $row['id'] ?>" />

    The JS error that I'm getting is:
    $(tip).get(0) is undefined

    Am I missing something very obvious here?
    Thanks for your time.

  91. uhleeka on March 15th, 2010 4:08 pm

    @James: LOL. glad to hear it.

  92. uhleeka on March 15th, 2010 4:17 pm

    @Sunny: your use of $(this) is not going to work:

    $('img[id^=Tooltip]').bubbletip($('#Tooltip_Content_'+$(this).attr('name')));

    instead, you need to get $(this) pointing to your <img>:

    $('img[id^=Tooltip]').each(function(i) {
    $(this).bubbletip($('#Tooltip_Content_'+$(this).attr('name')));
    });

    hope that helps!

  93. Vojta on March 16th, 2010 12:14 am

    Hi, really great plugin. I tried more than thousand of similar plugins, but this is the only one which is able to do what I need. But I have found one little problem: Is there way to add one div to be shown by multiple triggers? When I create one tipDiv for each trigger everything is ok but when I'm trying to use same div for multiple triggers the only first one is working.
    P.S. I'm sorry for my English.

  94. uhleeka on March 16th, 2010 9:57 am

    @Vojta: create your bubble tip on one div, then trigger your bindShow and bindHide events from your other div's.

    $('#myBubbleTipDiv').bubbletip($('#myTip'));
    $('.myOtherDivs').bind('mouseover', function() { $('#myBubbleTipDiv').trigger('mouseover'); });
    $('.myOtherDivs').bind('mouseout', function() { $('#myBubbleTipDiv').trigger('mouseout'); });

    hope that helps!

  95. Sunny on March 16th, 2010 12:32 pm

    @uhleeka, re: $(this) pointing to your <img>. Opps! Yeah, that did the trick. Thanks again!

  96. Vojta on March 16th, 2010 11:33 pm

    @uhleeka: Thanks, it works. But there it works perfectly in only one version of configuration and in Firefox. In the other ways is problem: there are more events able to hide same Tip and event from the other trigger often hide Tip before it should be hidden by event on trigger which showed it. I have tried change hiding event to mouseleave, but fact that mouse never was on the trigger isn't problem and event is called anyway. It isn't serious problem and I can use it this way, but I think it will be better to ask if I'm not missing something obvious again :)

  97. uhleeka on March 17th, 2010 11:01 am

    @Vojta: i posted another example on the demo page: http://www.uhleeka.com/demo/bubbletip

    is that the behavior that you were expecting?

  98. uhleeka on March 17th, 2010 11:15 am

    @All: thanks for all your questions and comments!

    please feel free to continue the discussion at: http://groups.google.com/group/bubbletip.

  99. bubbletip- A jQuery Coda-style bubble tooltip plugin | jQuery Wisdom on August 13th, 2011 12:19 am

    [...] Web Site Demo Download Share and Enjoy: [...]

Comments are CLOSED.