Athena - Responsive Flat WordPress Theme for Personal Blogs and Shops

Rollovers and tooltips with jQuery

Yesterday, I needed a quick setup for doing some rollovers and tooltips. You know, the usual stuff, mouse over an icon changes image and shows a tooltip. I thought about taking advantage of html tags attributes manipulation through jQuery. If you want to jump in right now you can go to the

jQuery rollovers and tooltips example page

Now, if you’re still with me, let’s take a walk through the code. This tutorial assumes that you have a basic knowledge of html, css and jquery.

The markup

This is pretty straight, just an unordered list with three items and each item has a link.

<ul id="iconbar">
<li><a href="#">
<img src="key.gif" alt="" />
<span>Change your password</span>
</a></li>
<li><a href="http://feeds.feedburner.com/ilovecolors" target="_blank">
<img src="rss.gif" alt="" />
<span>Suscribe to our RSS!</span>
</a></li>
<li><a href="#">
<img src="sel.gif" alt="" />
<span>Choose your options!</span>
</a></li>
</ul>

However, inside each link we have two important blocks: the icon image and a span. On the img tag, we’ll be changing its src attribute.  The span tag is what we will be using for the tooltip. Initially the img tag has a default src value and the span is hidden, when the time comes and the hover event is triggered, the img src attribute is redirected to a different location (another image) and the span is displayed showing the text you defined.

The styling

The style is a bit longer to read but we’re only styling two items: the li containter and the span block.


#iconbar li {
float:left; position:relative; margin-right:20px;
}
#iconbar span {
position: absolute;
top: -50px;
left: -80px;
display: none;
background: url(ttbg.jpg) no-repeat;
width: 110px;
height: 35px;
text-align: center;
padding: 5px;
line-height:110%;
color:#000000;
}

We’re defining an absolute position inside the relative position of our li element. Now we can assign some top and left values to position it. The values will be modified by our jQuery script later. The display is set to none, since we don’t want the span to be visible when we first open the page. The icons doesn’t require styling since we’re changing only the src attribute through jQuery.

The jQuery code

jQuery is truly amazing, with only a few lines of code we can have our icon rollover and tooltip ready. So, let’s get to it. When the DOM is ready, we’re launching a function based on the hover state of the li element within our iconbar. When it’s launched, it will get the src attribute of the image within li and it will store the name without the extension in a variable named origen.

jQuery(document).ready(function(){
$("#iconbar li").hover(
function(){
var iconName = $(this).find("img").attr("src");
var origen = iconName.split(".")[0];

Next, we assign a new path to the src attribute of img, appending “o” to the name, and the corresponding extension, in this case, “.gif”. The tooltip section begins animating its opacity to fade in and the top position (remember the values on the style sheet?).

$(this).find("img").attr({src: "" + origen + "o.gif"});
$(this).find("span").animate({opacity: "show", top: "-60"}, "normal");
},

Please, notice the comma separating the two functions. The hover event in jQuery takes two parameters: one for the mouse rollover state and one for the mouse rollout state. Now we get to the rollout state, this is what happens when the mouse rolls out of the li area. We take the image src attribute again and we split at the “o.”, the string we added on the hover event, and we redirect the src attribute to the original image path. The tooltip is animated towards a zero opacity, and we position it at the same top value that is defined in the stylesheet, in this case, 50. Notice that I haven’t added the “px” values. Don’t be as lazy as me and add them, but you can see that it still works without the “px” dimensions. We hide it fast to prevent any conflicts with any other thing. You know, when something can go wrong, it will, so don’t give it a chance.

function(){
var iconName = $(this).find("img").attr("src");
var origen = iconName.split("o.")[0];
$(this).find("img").attr({src: "" + origen + ".gif"});
$(this).find("span").animate({opacity: "hide", top: "-50"}, "fast");
});
});

Of course, some of you might be thinking that you can place anything inside that little cute span and indeed, it’s possible. For example, an icon.

<li><a href="#">
<img src="sel.gif" alt="" />
<span>Choose your options!<img src="sel.gif" alt="" /></span>
</a></li>

Next time we will be learning to do some sliding tooltips triggering the same hover event. Take for example an iconbar. When you hover the li items the li expands and the tooltip is revealed.

That’s all, so you can go ahead and make your own icon rollover with tooltip. Make sure you check the jQuery rollover and tooltip example page and the Free web development icons #4 SE from IcoJoy. Bye for now.

UPDATE: as the user faani requested, you can download the rollovers and tooltips with jquery project for close inspection.


“Rollovers and tooltips with jQuery” received 69 comments! Add yours.

  1. Marko Kolar November 22nd, 2008

    jQuery is good for modern web sites… but some browser have problems with it… web developers need a lot of hours to fix every bugs and problems with old browsers (eg IE6)… but i like jQuery and every kind of high tech web develope metods

  2. admin November 22nd, 2008

    Marko, I have to disagree. I’ve done jQuery implementations many times and they work smooth in browsers. I’ve had some annoyances with FF2, but targeting it and applying a different effect made the trick.
    I will post later how to target different browsers using jQuery.

  3. r.tatem December 4th, 2008

    cool effects. i’m new to jquery so what i’d like to see if possible is to fade from one icon to the other on rollover as opposed to the classic image swap.

    but nice none the less!
    thx.

  4. admin December 4th, 2008

    Yes r.tatem, tt’s possible. I’ll write an article soon explaining how to fade from on image to the other.

  5. Faani December 15th, 2008

    Can you pakcage that in a sample project to download?

  6. Joel February 8th, 2009

    Very impressive stuff … amongst the top jquery effects from an aesthetic perspective

  7. webweaver February 19th, 2009

    *collapses in a grateful heap on the floor*

    You would not BELIEVE the number of days’ work I’ve wasted searching for a decent tooltip, trying them out, eventually throwing each one away for various reasons and starting again…

    Your tooltip is perfect for the project I’m working on. Thank you so much for sharing it with us – you saved my ass!

  8. Elliot February 19th, 2009

    LOL I’m so happy you endless search has come to an end :D
    Enjoy it.

  9. parmjeet February 24th, 2009

    I find solution here.

  10. silverweb March 11th, 2009

    I am a asp.net guy, and have been using the AJAX toolkit that is provided by Microsoft.

    Can JQuery work with my asp.net web apps?

    Is JQuery “bought” by MS?

  11. Elliot March 11th, 2009

    jQuery will certainly work on your ASP pages since it operates on the DOM after it is ready. Microsoft didn’t bought jQuery. jQuery will be included in Visual Studio. you can see the news from last year on the jQuery blog:
    http://blog.jquery.com/2008/09/28/jquery-microsoft-nokia/

  12. Rollovers and Tooltips with jQuery « rockweb July 5th, 2009

    [...] DIRECT LINK » [...]

  13. Jake Rocheleau July 7th, 2009

    This is an amazing tutorial, very nicely written and easy to follow. I have checked out the blog too… an amazing design, Nicely done!

  14. 15 jQuery Tutorials For More Interactive Navigation July 7th, 2009

    [...] Tutorial Demo [...]

  15. Elliot July 7th, 2009

    Thanks Jake, I’m glad you’ve find it useful and thanks for your kind words about the site =)

  16. Best jQuery Interactive Navigation Tutorials for Creative designs. | guidesigner.net July 8th, 2009

    [...] Tutorial Demo [...]

  17. Profdesigner July 13th, 2009

    Super!!! ;)

  18. Vinidog July 18th, 2009

    Very nice… Tks !!!

  19. 60+ Must Have jQuery Toolbox | tripwire magazine July 21st, 2009

    [...] Rollovers and tooltips with jQuery [...]

  20. 12 Easy-to-Implement jQuery effects for your Website « Web Design / Development Blog :: Alt Creative August 17th, 2009

    [...] http://www.ilovecolors.com.ar/rollovers-tooltips-jquery/ [...]

  21. 25+ jQuery Tutorials Roundup | ExtraTuts August 17th, 2009

    [...] Rollovers and tooltips with jQuery : View Demo [...]

  22. ueb3.com.br :: A web como ela é! » 12 Tutoriais de Menus Animados com jQuery August 21st, 2009

    [...] Tutorial Demo [...]

  23. Amazing Multi Style Menu w/ jQuery and CSS | Free Share Everything August 25th, 2009

    [...] Visit Tutorial – Demo [...]

  24. 95+ Exceptionally Useful jQuery Plugins, Tutorials and Cheat Sheets | tripwire magazine September 1st, 2009

    [...] Rollovers and tooltips with jQuery [...]

  25. 25个 jQuery 实例教程 « SonicHTML – 高品质 HTML+CSS 服务 September 3rd, 2009

    [...] Rollovers and tooltips with jQuery [...]

  26. AleXawY September 4th, 2009

    Thanks a lot buddy.. really useful

  27. Elliot September 4th, 2009

    :D ur welcome

  28. Dubo.cl – links for 2009-10-05 October 5th, 2009

    [...] Rollovers and tooltips with jQuery | jQuery | ilovecolors Rollovers y tooltips con jQuery (tags: jquery rollover tooltip javascript ajax) [...]

  29. 95+ Exceptionally Useful jQuery Plugins, Tutorials and Cheat Sheets « Photoshop.vn – Your Design Resource October 9th, 2009

    [...] Rollovers and tooltips with jQuery [...]

  30. edikud October 15th, 2009

    really useful

  31. Rollovers and tooltips with jQuery | jQuery Wisdom October 17th, 2009

    [...] a tooltip. I thought about taking advantage of html tags attributes manipulation through jQuery. Web Site Demo Download AKPC_IDS += "699,";Popularity: unranked [?] Share and [...]

  32. Beny (from Poland) November 3rd, 2009

    In the latest version of Opera (10.01) there’s a problem – glittering icons made this code impossible to use! Opera is popular in Europe, so it’s pity to see, that so many JQuery script are not tested under this browser.

  33. margaret November 16th, 2009

    your site is beautiful. love the graphics

  34. J November 18th, 2009

    How do you make the animate effects reverse immediately when your mouse leaves the link? Instead, mine will go through the whole animation if you hover just for a split second.

  35. БECCTЫДHИK January 5th, 2010

    Конечно же присоединяюсь к вышесказанному!

  36. 16款Javascript提示工具(Tooltips) « 幻岛|领地 January 9th, 2010

    [...] jquery-rollover-tooltip [...]

  37. Behind the Scenes at Vibrant and Inspiring Design Blog ilovecolors | Inside the Webb January 28th, 2010

    [...] The most popular are the articles about some interface elements tutorials using the jQuery library, like rotating tabs, sliding menus or rollovers and tooltips. [...]

  38. nicolas February 6th, 2010

    Hello everybody, we agree this is a good stuf but can anyone tell me how it work on IE browser? thank

  39. Elio February 6th, 2010

    It works on IE7 :) It should work on all browsers since it’s a fairly simple technique

  40. Xcellence IT March 10th, 2010

    Its simple, but works great…

    Thanks for sharing this…

  41. Raul Navas April 2nd, 2010

    Hi… after mouse over the icon one time, if put a mouse up the icon… ooopps show de hide span… ¿why?
    sorry 4 my english

  42. Melony Mathenia April 2nd, 2010

    Thankyou, this is really helpful information, much appreciated.

  43. 360 April 9th, 2010

    Thankyou!
    It’s very used!!

  44. Dazy April 22nd, 2010

    Hi, Thank you for this nice tutorial.

    I want to modify the javascript code so that the tool tip always display at top but in center of these three images.

    For this I have set the left value but it isn’t working correctly.

    I want to ask what modifications will be required for this?

    Thanks,
    Dazy.

  45. most June 3rd, 2010

    awesome

  46. Ohms June 3rd, 2010

    After I roll out from the small icon anytime I roll over the area where the pop up was it shows up again. How do you avoid this? Other than that great job! I appreciate you posting this!

  47. thiru July 19th, 2010

    i want jquery slider with pagination and also with fade effect. pls help

  48. picunz July 24th, 2010

    nice job!
    awesome!
    i have some problem with chrome..it’s only my problem? thanks!!!!

  49. Ana August 23rd, 2010

    I found your post vry useful! I wont hesitate to recommend your contribution. :D

    Cheers!
    Ana

  50. caritas September 25th, 2010

    nice share thanks alot :)

  51. RAvert November 3rd, 2010

    Anybody got the magic tip how to vertical align the tekst in the balloon?

    Cheers!

    RAvert

  52. Elio November 3rd, 2010

    There a variety of techniques to vertical align the text in a block, in this case, a tooltip, like this one using jQuery or this one using CSS.

  53. Alicia November 3rd, 2010

    I am having an issue with getting the speech bubbles to appear above my images. They just default to the top left.

  54. Elio November 3rd, 2010

    To the top left of the browser? make sure the container for the link and the tooltip has position:relative in its CSS.

  55. Alicia November 4th, 2010

    Not in the top left of the browser, but on the left side of the div they are in.

    http://www.aliciakauffman.com/contact.php

  56. Jon November 5th, 2010

    Nice script but there is a probelm. The tip pop up can be selected by rolling over the actual tips as well as the image. The impact is that this affects other areas of the website and rescricts the user from accessing any data which may be behind the tool tips. Ideally the tips should only show when the user hold their mouse over the icon.

  57. Elio November 8th, 2010

    Thank you very much Jon for the input! I’ve fixed the code, feel free to check the example or download the zip file again.

  58. 25个 jQuery 实例教程 | 高品质 HTML+CSS 制作服务 - SonicHTML December 20th, 2010

    [...] Rollovers and tooltips with jQuery [...]

  59. Jon February 6th, 2011

    Hi Elio,
    that seems to have done the trick. Its a nice touch. I write my own CMS websites so tool tips and tool bars are always handy for new users when learning by doing. Nice script :)

  60. Don't Miss New 25+ jQuery Tutorials | Webblog360 February 23rd, 2011

    [...] Rollovers and tooltips with jQuery [...]

  61. arshalan April 30th, 2011

    cool :D

  62. 10 jQuery Tooltip Plugins and Tutorials | Web Design Northamptonshire May 25th, 2011

    [...] 1. Rollovers and tooltips with jQuery [...]

  63. Useful jQuery Tooltip Plugins and Tutorials for Your Design | Web Design Core July 21st, 2011

    [...] Rollovers and tooltips with jQuery [...]

  64. Rob January 19th, 2012

    Nice effects with that tooltip, check this one out as well: http://www.websanova.com/plugins/websanova/tooltip

  65. jQuery – Inspirationen » Download und Demo, Download |Integration Tutorial, Demo | Download, Demo und Download, , Download, Demo, jQuery, FancyZoom, Menu, Mouseover, Content, Featured, Rollover-Tooltips, Bubbles, Eigentlich, Slider, Geht, Ticker, Aber February 9th, 2012

    [...] Demo | Download [...]

  66. Baker May 3rd, 2012

    This looks amazing! Is it possible to create a similar effect on an image map map?

  67. Tooltips – Effekte für Websites » Designers-Buexe June 1st, 2012

    [...] Tooltip mit Bildwechsel [...]

  68. Ejemplos de menús complejos con CSS & JQuery | CSSBlog ES December 23rd, 2012

    [...] Drop Down Menu w/ CSS & jQueryVisitar tutorial – DemoRollovers and tooltips with jQueryVisitar tutorial – DemoTutorial: How easy to create a slide tabbed box using jQueryVisitar tutorial – Demo [...]

  69. 16款Javascript提示工具(Tooltips) | 多米诺网络资源 March 11th, 2014

    […] jquery-rollover-tooltip […]

Leave a comment