Tooltips with jQuery

There are tons of plugins the probably give you more options than the tooltip I have created. But if you only need a basic tooltip for your site this will do.

1. jQuery

$(function(){
       var originalTitle;
       $("a").bind({
              mouseenter: function(event){
                      $(this).after('<div class="tooltip"></div>');
                      originalTitle = $(this).attr("title");
                      var title = new Array();
                     var title = originalTitle.split("~");
                      $(this).next(".tooltip").css({
                              position: "absolute",
                              left: event.pageX + 10,
                              top: event.pageY + 10,
                              opacity: 0.90
                      }).html("<h3>"+title[0]+"</h3>"+title[1]).fadeIn(200);
                     $(this).attr("title", "");
              },
              mousemove: function(event){
                    $(this).next(".tooltip").css({
                             left: event.pageX + 10,
                             top: event.pageY + 10
                    });
              },
              mouseout: function(){
                   $(this).attr("title", originalTitle);
                   $(this).next(".tooltip").remove();
              }
        });

});

This is the jQuery code for my quick and easy tooltip. It simply fades in when the user hovers over an anchor tag and hides when the users mouse exits the anchor tag.

var originalTitle; = This is how to state a global variable in Javascript. PHP has a global method to use variables in different functions but Javascript does it by declaring the varaible outside the functions. Note that I mean Javascript, not jQuery. I'm using a global variable because later on I will be removing the title attribute but I will later on need it again, so I saved the title in a variable for later use.

$("a").bind({ = If you want to bind multiple events to an element you use the curly brackers (''{","}"). Normally if you wanted to attach one event to an element element you would write $("a").bind("click"). This will be de discussed in a jQuery lesson coming soon.

mouseenter: function(event){ = When the users mouse hovers over the element, run this function. I put the string event in between the brackets because the Javascript will now be able to record things such as where the mouseenter was triggered.

originalTitle = $(this).attr("title"); = When working with global variables (variable scopes) it is important to leave out the words var at the beginning.

var title = new Array(); = I am creating a new Array. I chose to use an array because it is a simple way to organise data.

var title = originalTitle.split("~"); = This will spit the contents of originalTitle. It will split it where a '~' is. Split is a pure javascript method. I've used a lot of pure Javascript to show you all that jQuery and Javascript can very well interact with each other. JQuery is Javascript!

left: event.pageX + 10, = Here's the interesting part. We are placing the .tooltip element exactly where the event (mouseenter) was triggered. I added 10 px so that the tooltip doesn't display exactly under the cursor. Just for user readability.

top: event.pageY + 10 = Top does the same as left. It records exactly how many px the event was triggered from the top of the page and places to tooltip there.

$(this).attr("title", ""); = Now I removed the title of the anchor tag so that it only shows the custom tooltip we made. Otherwise it would also show the default browser tooltip.

mousemove: function(event){ = This function will make the tooltip follow the cursor.

mouseout: function(){ = On mouse out

$(this).attr("title", originalTitle); = First of all, restore the title tag so the user can hover again over the anchor tag and get a tooltip. We have to restore the title attribute because we removed it earlier on.

$(this).next(".tooltip").remove(); = Then remove the tooltip element.

2. CSS

.tooltip {background-color: #FEFFCA; font-size: 12px; padding: 4px; border: 2px solid #F4E200; -webkit-border-radius: 8px; -moz-border-radius: 8px; display: none;}

I added some eye candy for mozilla and safari/chrome users. Those users will see rounded corners. IE users will see boring cornered tooltips.

3. HTML

<a href="#" title="Tooltip tile~Tooltip body">Hover over me</a>

Everything before the "~" is the title of the tooltip. So the font size will be a little bigger. Everything after the "~" is the body of the tooltip. This is will become clear when viewing the demo.

http://tutcenter.net/tutorialFiles/tooltip/