Question

I’m trying to implement a simple tooltip on my website. It works fine, showing the tooltip to the right of the cursor, but now I’m trying to get the same effect only positioned to the left of the cursor. How do I achieve this?

Here is my code:
http://jsfiddle.net/3r5aq/

Probably a novice thing to ask, but I can’t seem to figure this one out myself.

Answer 1

You can calculate the width of the tooltip. Obviously if you have multiple on the page, you will need to update the selector.

.mousemove(function(e) {
            var mousex = e.pageX - 5 - $(".tooltip").width(); //Get X coordinates
            var mousey = e.pageY;      //Get Y coordinates
            $('.tooltip')
            .css({ top: mousey, left: mousex})
    });

http://jsfiddle.net/3r5aq/18/