Question

Don’t know why the tooltip box(class .show_tooltip) shows up on the left when mouse enters on li a. I want to display each tooltip box on top of the same link that mouse is, i.e. just above/left of the link. Links have to be on the right just as they are now, so please do not change my html code) DEMO

Example : Mouseover on “how”: What can I do to get it like this?

These codes are a small specimen part from my original code, which is quite long.

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>

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

Answer 1

Firstly, you are making the markup complicated that way, but since you told not to modify the HTML, here’s what you can do to place the tooltip just next to the link.

Working Demo -> http://jsfiddle.net/bikerabhinav/AQh6y/8/

Explanation:
Get the width of parent container (to act as the axis/base)

    var t = $('ul').outerWidth();

Get the left-offset of link :

var l = $(this).offset();

Apply these to the CSS of tooltip. Position it absolutely:

$("li a").mouseenter(function(){
    var l = $(this).offset();
    var t = $('ul').outerWidth();
$(this).prev().css({right:t+20-l.left,top:l.top}).fadeIn();
}).mousemove(function(e) {
        $('.tooltip').css('bottom', e.pageY - 10);
        $('.tooltip').css('right', e.pageX + 10);
     }).mouseout(function(){
     $(this).prev().fadeOut();
});

PS: this is more of a hack basically, but I hope you get what I’m trying to do here. A much better way would be if you clean up the HTML