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!! :)

simple tooltip popup in jquery

Hi,

Previously, i have told you on how to create a jquery tooltip in part1 of my blog.

This tutorial shows you how to show tooltip popup within window and how to show content like another link etc within tooltip dynamically using Jquery and css.

Lets start....

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

.tip_close{  border: 0px solid #0000FF;
    color: #99CC99;
    cursor: pointer;
    float: right;
    font-family: Arial;
    font-size:12px;
    font-weight: bold;
    margin-left: 4px;
    margin-right: -6px;
    margin-top: -9px;
    padding-bottom: 1px;
    padding-right: 1px;
    top: 0; opacity: 0.5;
    }

.tooltip a{ color:#999966; }

.tooltip a:hover{ color:#99CC00;  }

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

JQUERY TO SHOW TOOLTIP:

function show(id,txt,e){
                        var offsetsLeft = $(window).scrollLeft();
                        var offsetsTop = $(window).scrollTop();
                        var leftpos = parseInt(offsetsLeft + (e.pageX)) + 'px';
                        var toppos = parseFloat(offsetsTop + (e.pageY)) + 'px';
                        var idwidth = parseInt($(id).width());
                        var winwidth = parseInt($(window).width());
                        var offset =25;      
                 //calculate your pointer position , if it is greater then the winow position then reset the position to your div width plus offset width minus the window object width.

                        if(winwidth - (offset *2) >= idwidth  + e.pageX){
                                leftpos = e.pageX+offset;
                        } else{
                            leftpos = winwidth-idwidth-offset;
                        }
//append the left and top position to the tooltip div
                      $('#toolt').css({'top':toppos,'left':leftpos});
//append a span with class "tip_close" to the content , so that it can be used to close the dynamic popup
//also call hide() function to close the tip on click of the span tag.

                        document.getElementById("toolt").innerHTML='<span class="tip_close" onclick="hide();">X</span>' + txt;
                        $('#toolt').slideDown();

}

function hide()
{
    $('#toolt').slideUp();
 }

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 div on that particular division.The first part of the function will do that trick.
Later, when we click X  the tooltip will be closed. 


INITIALIZING THE TOOLTIP:

<a href="javascript:void(0);" onmouseover="javascript: show('a','This page is sponsored by sreevathsa<br> <a href=http://www.sreevathsabv.blogspot.com>Sreevathsa</a>')" />

If you need to call a tooltip for the 'p' tag, then you can use the above method to initialize the tooltip. The second parameter is your content of the tooltip, the thired parameter "event" will be used to calculate mouse position or click position
Dont forget to pass the DOM object in the first parameter and remember your DOM object will be your first parameter.

DEMO LOOK.....


Please subscribe for more cool codes :)

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