Experimental jQuery Tooltips

Experimental jQuery Tooltips

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on August 25, 2009

I’ve never written a jQuery tooltip script before so i thought i’d give it a go and write my own. Its very much in the experimental stage but i thought i’d open it up to see what the community has to say about it. I had the most trouble with the ajax tooltip and getting the content to display in the tip. I know there are plenty of jQuery tooltip scripts out there but i really wanted to see how they were made, and the best way to find out is to build one for your self.

So here’s the JS

$(document).ready(function(){

$('[rel=tooltip]').bind('mouseover', function(){

 if ($(this).hasClass('ajax')) {
	var ajax = $(this).attr('ajax');	

  $.get(ajax,
  function(theMessage){
$('<div class="tooltip">'  + theMessage + '</div>').appendTo('body').fadeIn('fast');});

}else{

var theMessage = $(this).attr('content');
	    $('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast');
		}

		$(this).bind('mousemove', function(e){
			$('div.tooltip').css({
				'top': e.pageY - ($('div.tooltip').height() / 2) - 5,
				'left': e.pageX + 15
			});
		});
	}).bind('mouseout', function(){
		$('div.tooltip').fadeOut('fast', function(){
			$(this).remove();
		});
	});
   });

The HTML

The following combination of attributes can be added to any link to create a tooltip.

  • rel=”tooltip” | this enables the link as a tooltip without this no tooltip would be show for that specific link
  • class=”ajax” | if you want to call another page using ajax into the tooltip you need to add this class aswell as add the attribute ‘ajax’ with the link to the page you want to call
  • ajax=”AJAX_URL_HERE” | this is where you specify the link to the page that you want to pull in using ajax.
  • content=”Tooltip content” | this is where you put your main tooltip text including any image using regular html
<li><a href="#" alt="Text Tooltip" rel="tooltip" content="<span>Text Title</span><br/> This is an example of a text tooltip with jquery">Text Tooltip</a></li>

<li><a href="#" alt="Image Tooltip" rel="tooltip" content="<span>Image Title</span><br/> <img src='http://papermashup.com/demos/jquery-gallery/images/t2.png' width='120' height='120' class='tooltip-image'/> This is an example of an image tooltip with jquery, with a little bit of text.<br/> Remember you can follow me on twitter just search: ashleyford">Image Tooltip</a></li>

<li><a href="#" alt="Image Tooltip" rel="tooltip" content="<span>Iframe Tooltip</span><br/> <iframe src='http://google.com' width='250px' height='100px' frameborder='0' scrolling='0'></iframe>">Iframe Tooltip</a></li>

<li><a href="#" class="ajax" alt="Image Tooltip" rel="tooltip" ajax="ajax.php?id=1823472">Ajax Tooltip</a></li>

I’m posting this purely as an experiment, and this code hasn’t been tested in all browsers so is very much in the alpha stage. I’d love to hear your feedback on what or how you would do it. :)

demodownload


Recent shares

Comments
15 discussions around Experimental jQuery Tooltips
  1. Dorababu says:

    Nice one..

    What should I do if I would like to do like this, on clicking I would like to pop up a tool tip with close button . I would like to implement and hover and click together on the same icon or control we have taken.

  2. Rob says:

    I think it’s good to create a plugin using prototyping, allowing for more flexibility of the plugin, like this one here: http://www.websanova.com/plugins/websanova/tooltip

  3. Hello guys awesome job anyways we got a problem with W3C validation with the “content” atribute anyways is easy to fix but for the who’s just copy and apply keep it in mind.

  4. Christian says:

    To mask the tooltip with its creation

    To add to the class
    .tooltip{
    visibility:hidden;
    }

    To add to the script
    $(this).bind(‘mousemove’, function(e){
    $(‘div.tooltip’).css({
    ‘top’ : e.pageY – ($(‘div.tooltip’).height() / 2) – 5,
    ‘left’: e.pageX + 15
    })
    .css(‘visibility’, ‘visible’);

    });

    Thank you for this excellent work
    Christian

  5. Rafa says:

    @joe You could use the [rel^='tooltip'] selector to make it work and have a link like this:
    <a href="#" alt="Text Tooltip" rel="tooltip Text Title This is an example of a text tooltip with jquery">Text Tooltip

    Then you can remove the “tooltip” part and voila! Successful validation, but i don’t know if it would be a huge impact on performance

  6. Joe says:

    Nice script, I used on my site and it works well – only issue is it doesnt validate because of the content attribute – any workarounds for that?

  7. Matt says:

    The mousemove function, which controls the position of the tooltip, isn’t bound until mouseover fires. The result is if the user moves his mouse slowly or lands on the wrong spot the tooltip will appear at the bottom of the page until he moves his mouse again.

    I altered your code by styling the div to “display:none” inside of mouseover and then changing it to “display:block” inside of mousemove. Now it works like a champ.

  8. It seems that the last tooltip doesn’t appear on the right spot on mouseenter, just on mousemove.
    Very cool tutorial ;)

  9. Pingback: 網站製作學習誌 » [Web] 連結分享

  10. Jake says:

    I was thinking if this will gonna work for comments but i think it will but have a lots of code.

    Example: the name of the commentor will only display like a list and the body of comment will show if you point it using this tooltip.

  11. Pingback: CSS Brigit | Experimental jQuery Tooltips

  12. Balaji says:

    Very nice! I’ve been wondering aboutJquery lately. Do you have any thoughts about Drop and down using Jquery

  13. Balaji says:

    Wow, I hadn’t thought about it that way before. Good write up, very clearly written. Have you written previously about Experimental jQuery Tooltips? I’d love to read more.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Looking for a registry cleaner to speed up your PC and show a full diagnostics?
Faster surfing with Dish Network High Speed Internet

Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in touch.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com you can find details here Or use the contact link below for further advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.