About Me

My photo

one who looks outside, dreams
one who looks inside, awakens!!

Get FREE updates!! subscribe!!

Delivered by FeedBurner

Like it? Follow up!! :)

Oct 12, 2013

simple tooltip in Jquery

Hi,

In this post, i have attempted to create my own jquery code to show the tooltip on mouseover event.
The coding goes like this:

CREATE A DIV ELEMENT:

<div class="tooltip" id="toolt" style="display: none;"></div>

create a div element and name the ID as "toolt"(not necessarily same name)and initially hide the division by giving style="display:none;" option

CSS FOR THE ELEMENT:

.tooltip{
  border:1px dashed #0000FF;
  padding-left:10px;
  padding:5px;
  width:100px;
  background-color:#CCFFFF;
  position:absolute;
  opacity:0.9;
  font-family:Geneva;
  font-weight:bold;
  -moz-box-shadow: 0 0 13px #888;
  -webkit-box-shadow: 0 0 13px #888;
  box-shadow: 0 0 13px #888;
  -moz-border-radius:3px;
}

Note that i have called the css through .tooltip class in the division which is supposed to be used for tooltip on hover.
Also, note that i have cracked the mozilla firefox to create round edge effect .Also, i would give a different design in IE.

JQUERY TO SHOW TOOLTIP:


function show(id,txt){
    $(id).mouseover(function(e){
    var offsetsLeft = $(window).scrollLeft();
    var offsetsTop = $(window).scrollTop();
    leftpos = parseInt(offsetsLeft + (e.pageX)) + 'px';
    toppos = parseFloat(offsetsTop + (e.pageY)) + 'px';
    $('#toolt').css({'top':toppos,'left':leftpos});
    document.getElementById("toolt").innerHTML=txt;
    $('#toolt').show();
});

$(id).mouseout(function(e){
    $('#toolt').hide();
    e.stopPropagation();
});
}

First , we need to pass the parameter to the function "show()"(see below to see how it is initialized), the first parameter should be DOM object type like a,p,span,div etc; the second parameter should be the content that will be displayed in the tooltip.
Next we shall calculate the mousepointer coordinates and call the tooltip division on that particular division.The first part of the function will do that trick.
Later, when mouse is taken off we will hide that division again.


INITIALIZING THE TOOLTIP:


If you need to call a tooltip for the 'p' tag, then you can use the above method to initialize the tooltip. Dont forget to pass the DOM object in the first parameter and remember your DOM object will be your first parameter.

Thats it guys, feedback's are welcome! :)