Simple Tooltip with jQuery (only text)

August 28, 2011

Hello guys, I created a simple tooltip with jQuery, in this version display only the text. A tooltip is an interface component that appears when a user hovers over a control.

They’re already present in most browsers; when you provide a title attribute for a link or an altattribute for an image, the browser will usually display it as a tooltip when the user hovers over that element. By storing the text using the data command, i can recover and replace the link “title” later.

HTML

The markup is really simple and flexible and adapts to many possible scenarios you might encounter. Must have a class “masterTooltip” which will launch the tooltip, and the tag “title” that will contain the text inside.

<a href="#" title="This will show up in the tooltip" class="masterTooltip">Your Text</a>
<p title="Mouse over the heading above to view the tooltip." class="masterTooltip">Mouse over the heading text above to view it's tooltip.</p>
<img src="image.jpg" class="masterTooltip" title="Tooltip on image" />

CSS

The styling is very simple, you can create anything with your creativity, this is just a default setting for your future applications.

.tooltip {
	display:none;
	position:absolute;
	border:1px solid #333;
	background-color:#161616;
	border-radius:5px;
	padding:10px;
	color:#fff;
	font-size:12px Arial;
}

jQuery

The first step is to call the jQuery file.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Create a new script tag and insert the code.

<script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coordinates
        var mousey = e.pageY + 10; //Get Y coordinates
        $('.tooltip')
        .css({ top: mousey, left: mousex })
});
});
</script>

The Logic

  1. Grab the title
    First we need to grab the title from the link, which will be the text we want our tooltip to display.
    We need to do this because we’ll be removing the title from the link, in order to prevent the browser from displaying its default tooltip that will conflict with our custom one. By storing the text using the data command, we can recover and replace the link title later.
  2. Hover over code
    Create a new paragraph element with a class of tooltip, we use the text method to set the tooltip’s contents.
    Add new node to the page using appendTo and setting the animation with .fadeIn.
  3. Hover out code
    It’s simple, restoring the title attribute and removing the tooltip.
  4. Mouse move code
    This is important, as we’ll need to access the X and Y coordinates of the event in order to position the tooltip.
    This way the tooltip will follow the mouse around.

Conclusion

We replaced a tooltip with our own, where we can manipulate both the style and animation.
If anyone has any questions, concerns, or comments please feel free to let me know!

62 Comments

  1. Marco

    awesome blog, do you have twitter or facebook? i will bookmark this page thanks.

  2. Nonie

    My hat is off to your asutte command over this topic-bravo!

  3. Oh my goodness! It is like you read my mind! You seem to know so a lot about this, just like you wrote the book in it or some thing. I think that you could do with some pics to drive the content house a bit, besides that, this is helpful blog post. A outstanding read. I will definitely return again.

  4. UGG

    It’s a really good read I think, Must admit that you actually are one of the perfect bloggers I ever saw.Appreciate your sharing placing this interesting article.

  5. I really enjoyed reading your web site and specifically this blog post. Is there any other way besides your RSS feed that we could get updates of future material? Thank you for your time.

  6. Perfect work you have done, this site is really cool with good information.

  7. Well, the post is actually the freshest on this laudable topic. I concur with your conclusions and will thirstily look forward to your future updates.

  8. Keep up the amazing work!! I love how you wrote this and I also like the colors here on this site. did you create this yourself or did you outsource it to a coder??

  9. I loved reading this post I will be sure to tell my friends about this and link to it as well. Thanks

  10. I look forward to seeing more great posts like these.

  11. amruth

    superb….well designing..

  12. Thank you! Works perfectly!

  13. Rock on! So simple. Thank you.

  14. JayNL

    Exactly what I needed. No difficult, hard to configure plugins with stupid mountains of CSS, just one simple CSS class and 20 lines of jQuery. Thanks!

    I’ve changed the selector to [title], so now it works on all my titles throughout my site. Perfect!

  15. Drix

    Hi! I tried to use this code, but ít’s not working in Internet Explorer.
    Could you explcain how to correct it?
    Many thanks!
    Drix

  16. Thanks for this. What if you want the tool tip to stay static based on the page… I want to keep the tooltip in the center of the page, no matter where it is accessed. Can this be done?

  17. Duncanc

    Do you know how to remove default tool tip in Internet explorer?

  18. Vince357

    awr, as DUNCANC just said it, I can’t get rid of the default title msg in IE8/7 :-(
    Any thoughts?

  19. Delete Default Tooltip IE9 ?

  20. I want to show image on mouse over. it is possible with that script???

  21. Marvil

    Hey… Let me know how to show the image itself within the tooltip for the image mouse over…. like thumbnail hover show the larger image..

  22. Very nice code snippet – thank you for sharing!

  23. PulpitRocks

    Hi,

    Great code but I have a slight issue. In Internet Explorer 7-9 the code works perfectly but it also shows the title tag created by IE over the top of the tooltip. Any way of disabling that in IE so it just shows the modified title tag?

  24. Pulpit Rocks

    Sorry,

    Just retested. That double effect is only an issue in IE9. 7 and 8 work perfectly. Also, and I am not sure if this would cause the issue, my images all have alt text but it is the title tag that IE9 is showing over the top of the tooltip.

    Many thanks for any help.

  25. Linda

    Unfortunately shows both the normal tooltip and JQuery tooltip in IE7/8. Any way to get around this?

  26. This function works in IE:

    function hideTips(event) {
    var saveAlt = $(this).attr(‘alt’);
    var saveTitle = $(this).attr(‘title’);
    if (event.type == ‘mouseenter’) {
    $(this).attr(‘title’,”);
    $(this).attr(‘alt’,”);
    } else {
    if (event.type == ‘mouseleave’){
    $(this).attr(‘alt’,saveAlt);
    $(this).attr(‘title’,saveTitle);
    }
    }
    }
    $(document).ready(function(){
    $(“a”).live(“hover”, hideTips);
    });

    Great tutorial man!

    JP – Brazil

  27. saver

    Thank you. It works very well with all browsers, but is very slow in Internet Explorer. And unfortunately, the majority of internet users use internet explorer. Patience.

  28. Excellent work! Thanks.

  29. Excellent work! Thanks…easy to follow =)

  30. marco

    Su explorer non funziona bene, viene fuori anche il title normale html :(

  31. paraz

    This is brillllllliant !!!! thanks a lot…

  32. thanks for this wonderful tutorial.

  33. Hello,

    If you any query in coding related to LIVE CLOCK IN JQUERY & how to solve to problem in LIVE CLOCK IN JQUERY . So you are connect to link thus you problem solve by this link:- http://www.dotnethunt.com//22/live-clock-in-jquery

  34. hi man.. i have implemented your tooltip in to my website but it really hates IE7 so i have fixed it up to work. you really need to look in to making it more cross browser..

    great thing but a little more work needed.

  35. capri6

    hi there! Very elegant tooltip! well done!
    I have a question, though – I can’t seem to change the default css for the tool tip.
    I’ve tried changing the colour of the text & background & it’s the same. in .tooltip….can you help please
    thank you
    c

  36. Phil

    For some reason IE doesn’t like removeAttrr(‘title’)

    I replaced it with: $(this).data(‘tipText’, title).attr(‘title’,”); and all seems well.

    Thanks for the script, though, it was exactly what I was looking for.

  37. Leon

    Sweet example. Thanks :)

  38. Telmo Cardoso

    Thanks PHIL, that works…and thanks ALESSIO ATZENI for doing something simply without the need to import js/css files.

  39. Art

    So simple. Saved so much time. Thanks! :)

  40. dispulpen my basic English my question is is there a way? that the tooltip remains static in a fixed position, right next to the link or image, could put the code as it should be … thanks very good post!

  41. Prathibha

    Excellent piece of code :) It was helpful. For some reason, I am not able to change the background color and the text color of the lQuery tooltip. Any suggestions/advice is appreciated

  42. Nukesh

    Excellent code, perfect one for my need. Cant get better than this one. Keep up your work might, I am very happy that my search for this has ended

  43. Felix

    Great work.
    I have to write this code so that the class = “masterTooltip” one level up as the Title element is. Is that possible?

  44. Felix

    Example

    ul>
    li class=”masterTooltip”>

    img src=”image.jpg” title=”This is the infotext.” />

    /li>
    /ul>

  45. Marvil

    Bug.. Its not working inside lightboxes…. Ex: Fancy Box…. Its not showing up…. please reply…

  46. Ankur

    Nice code man! Thanks :)

  47. Simple and effective, thanks a lot for this!

  48. Dushan

    Wow, easy and smooth, but first of all very effective. Awesome job, and thanks for sharing. Cheers.

  49. Tomy

    Hey Guys,

    first thx for the script ;)

    but, how can i make thats the tooltip shows pics when i hover over a text.

    sry for my bad english :)

  50. SUDHIR

    Nice and simple. Saved me from adding an additional jquery plugin

  51. Quang Vinh

    Great, thank so much!

  52. Hitesh

    This is very simple and awesome code. Thanks a lot…. :)

  53. Shoaib

    Awesum :)

Trackbacks for this post

  1. Yoshol

Leave a Reply