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

Related PostsjQuery javascript tooltip tutorial plugins

0 Comments

Write a Comment

Archive

About

We are a team, that resides in Germany (please, do forgive our bad English) and we have developed an international based and uncomplicated software for users, who do not know (or do not like to know) much about all this programs like HTML, PHP, SqLite, JS, Browser differences etc.. Users who like  to ....Read More
Havalite CMS in english language Havalite CMS in deutscher Sprache هافالايت العربية لنشر المقالات