Custom Tool tip

by Jaganathan

HTML

<div class="somefield">Here is the area</div>

<div class="tooltip">tooltip1</div>

CSS

.tooltip {
    margin:10px;
    padding:12px;
    border:2px solid #666;
    width:auto;
    display: none;
}
.somefield {
    background-color: #eee;
    border: 1px solid red;
}

JavaScript

$(document).ready(function(){

    $('.somefield').mouseover(showBox);
    $('.somefield').mouseleave(hideBox);

    function showBox(e){
        var x = e.pageX + 20,
            y = e.pageY + 20;
        $('.tooltip').fadeIn().offset({ left: x, top: y }).text('your tool tip text');
    }
    
    function hideBox(){
        $('.tooltip').fadeOut();
    }
});