Custom Tooltips using Jquery

hello Guys!  Custom ToolsTips using  jquery are very nice and easy to implement.This custom tooltips can be used for displaying text and also  Image on link while the hover action.All we need is to get the mouse co-ordinates then accordingly show the our Custom Jquery Tooltip.You just cant imagine how easy is this Tooltip to implement ,even a beginner level can understand the code.

First of all we crate a regular html link as below:

Link Markup for Custom jquery ToolTips:

<a class="ttip_container" href="www.designaeon.com">
 Text Link Tooltip:designaeon <span class="tooltip">this is Custom text Toltip</span>
</a> <!--simple text tooltip-->
<a class="ttip_container" href="http://designaeon.com/two-level-css-menu/">
 Custom image for Tooltip <span class="tooltip">
 <img src="img/2lev.jpg" alt="" width="300" /></span>
</a> <!--image tooltip-->

You can clearly see we have two classes ‘ttip_container’ and ‘tooltip’ . the content inside ttip_container is what we going to see and the other one tooltip class is hidden using the css display property.lets take a look at css code:

Jquery ToolTip Css

.tooltip {
    color: #fff;
    background:#1d1d1d;
    display:none; /*--set hidden--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

As you see the css is small can simple.from code it should be clear that we have hidden inner tooltip class.now the main jquery magic comes .what it does is on hover function looks for the inner class tooltip and we use the jquery show function to show the tooltip and on call back means mouse out the hide function hides the content inside tooltip class.lets take a look at Jquery code:

Jquery Custom Tooltip script:

$(document).ready(function() {
//Tooltips
$(".ttip_container").hover(function(){
ttip = $(this).find('.tooltip');
ttip.show(); //Show tooltip
}, function() {
ttip.hide(); //Hide tooltip
}).mousemove(function(e) {
       var mousex = e.pageX + 20; //fetch X coodrinates of pointer
var mousey = e.pageY + 20; //fetch Y coordinates of pointer
var tipWidth = ttip.width(); //get width of tooltip
var tipHeight = ttip.height(); //get height of tooltip
//Distance of element from the right edge of viewport
var tipX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipY = $(window).height() - (mousey + tipHeight);
if ( tipX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}        //Absolute position the tooltip according to mouse position
ttip.css({  top: mousey, left: mousex });
});
});

That was our all Jquery code for the Custom Tooltips.You might have noticed the few checks in the jquery mouse move method. to check the tootip ion accordance with the window height and width.All the code is pretty clean and easy.
I have included the Demo and the source code.Below are the links:

Live Demo

DOWNLOAD

Thanks For visiting Designaeon