Creating a simple Tooltip in jQuery

HavaLite CMS

A new liteweight Content Management System (CMS)

Creating a simple Tooltip in jQuery

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=""></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)

      // 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; });	


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

   border:1px solid #ccc; 

Thats it!

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

Have fun

comments powered by Disqus


    Leave a Reply

    Contact Info

    Phone: +49 941 26175

    Address: Ayman Teryaki,
    Prüfeninger Str. 48,
    93047 Regensburg, Germany

    Want more info - go to our contact page or visit Google+


    Stay up to date. Subscribe via RSS, Facebook, Twitter or Email

    Recent Comments