Creating a simple Tooltip in jQuery

27.Oct.2012  |  Posted by admin  |  Filed under Tutorials

I was searching in the internet for a very simple jQuery plugin to view a tooltip over some map area with the description which written in the alt attribute. I also found plenty of nice plugins but not the one that fits the simplicity which i need. Thats why i thought i would better try doing it on my own, cause jQuery has all requirements a programmer needs (thats why i love this frame work) for designing such a easy task.

First of all we implement the jQuery frame work in the head part of our site by calling it from the google sites as follow:

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

Now we paste the following code after calling the frame work:

<script language="javascript">

$(document).ready( function(){
	
   var container = 'desc';

   // we create a container for the tooltip with id "desc" 	
   $('body').append('<div id="' + container + '" style="position:absolute; display:none;"></div>');

   // we check all area elements (you can change to "a" element or any other tag)
   $("area").each(function(){

      // behavior onMouseOver
      $(this).mouseover(function(e) {
         var headTitle = $(this).attr("alt") || $(this).attr("title");
         if(headTitle != null){
            $("#" + container).css({ 'top': (e.pageY) + 'px', 'left':(e.pageX + 20) + 'px', 'display':'block' });
            $("#" + container).html(headTitle);
         }
      });

      // behavior onMouseOut		
      $(this).mouseout(function() {  
         $("#" + container).css({ 'display':'none' });
      });

      // behavior onClick in case the link is been clicked
      $(this).click(function(){ return false; });	
   });
});

</script>

Now we can design our tooltip style the way we like to. Here is the easiest way to view a tooltip box in css:

#desc{ 
   max-width:300px; 
   border:1px solid #ccc; 
   padding:10px; 
   background:#000; 
   color:#fff; 
}

Thats it!

If you like to see a working demo of this code visit the HowTo documentation of Havalite

Have fun

0 Comments

Write a Comment