Style for displaying tooltip box

JavaScript
1

Not know why tooltip box(class .show_tooltip) there is left when mouse enter on li a, i want display each tooltip box top same link that mouse is enter on it and if the width and height was more or less it is same style.(i want links put in right) [B]DEMO[/B]

I want example this (for how): what do i do?

CSS:

.show_tooltip{
    background-color: #E5F4FE;
    display: none;
    padding: 5px 10px;
    border: #5A5959 1px solid;
    position: absolute;
    z-index: 9999;
    color: #0C0C0C;
    /*margin: 0 0 0 0;
    top: 0;
    bottom: 0;*/
}

HTML:

<ul>
    <li>    
    <div class="show_tooltip">
        put returns between paragraphs
    </div>
        <a href="#">about</a>
    </li>
    <br>
    <li>    
    <div class="show_tooltip">
        for linebreak add 2 spaces at end
    </div>
        <a href="#">how</a>
    </li>
</ul>

jQuery:

$("li a").mouseenter(function(){
     $(this).prev().fadeIn();
}).mousemove(function(e) {
            $('.tooltip').css('bottom', e.pageY - 10);
            $('.tooltip').css('right', e.pageX + 10);
        }).mouseout(function(){
     $(this).prev().fadeOut();
})
2

The main mistake you have done is you have used .tooltip class in jquery where the actual class in css is .show_tooltip

$(‘.tooltip’).css(‘bottom’, e.pageY - 10);
$(‘.tooltip’).css(‘right’, e.pageX + 10);

Replace the css like this


.show_tooltip{
    background-color: #E5F4FE;
    display: none;
    padding: 5px 10px;
    border: #5A5959 1px solid;
    position: absolute;
    z-index: 9999;
    color: #0C0C0C;
    /*margin: 0 0 0 0;
    top: 0;
    bottom: 0;*/
/*add some width according to tooltip text lenght */
    width:320px;
}

and

replace the jquery


$("li a").mouseenter(function(){
     $(this).prev().fadeIn();
}).mousemove(function(e) {
            $('.show_tooltip').css('top', e.pageY -40);
            $('.show_tooltip').css('left', e.pageX -350);
        }).mouseout(function(){
     $(this).prev().fadeOut();
})