Code Sample :: Show Tooltip ( Cross Browser IE , Chrome , FireFox )

  /* Function Show Tooltip form URL

     Browser IE7 ,Google Chrom ,Mozilla FireFox

     By      Thitipong Samranvanit.

     Date    21-10-2010

     JS         Native JavaScript  ,  jQuery     
     Parameter : topic_id , object (DOM) , event (DOM)        

  */

  function showtooltip(tid,obj,event){

             /* <<<<--- Change To Your URL */

            var url = "index.php/getview/admin_show_detail/" +  tid ;

            var tt = $("#tooltip");

            var difx = 15 ;

            var dify = 15 ;

           

            var xx , yy ;

            var e = window.event  /* IE TYPE */ ;

            if( e ){  /* IE TYPE */

               xx = e.clientX + difx ;

               yy = e.clientY + dify ;

            }else{   /* FIREFOX and  Chrome */

               xx = event.pageX + difx ;

               yy = event.pageY + dify ;

            }

            tt.html("OOO1" + e + "]");  

            tt.html("OOOP2");  

            //tt.html ( xx + " : " + yy )  ;

            tt.css('z-order',99).css("position","absolute").css("top" ,yy ).css("left" , xx );

            tt.css("border","1px solid #000000").css("background-color","lightyellow");

           

            tt.load(url);

            tt.css("opacity","0.95").show();

  }

  function hidetooltip(){

        $("#tooltip").hide();

  }

------------------------------------------------------------------

Usage 

HTML/PHP File  

<img src=”…”

Onclick=”…”

…

onMouseOver="javascript: showtooltip(<?=$entry['id'] ?> ,this ,event)"

onMouseOut="javascript: hidetooltip( )" 

…

> 

In this php file  

I pass parameter  (  topic_id,  this , event ) 

this = image tag object in DOM 

event =  MouseEvent  in DOM