Question

I have the following jQuery code:

        $('span.readMoreReputation').mouseover(function(event) {
        createTooltip(event);               
    }).mouseout(function(){
        // create a hidefunction on the callback if you want
        hideTooltip(); 
    });

    function createTooltip(event){          
        $('<div class="tooltip">test</div>').appendTo('body');
        positionTooltip(event);        
    };

    function positionTooltip(event){
        var tPosX = event.pageX - 10;
        var tPosY = event.pageY - 20;
        $('div.tooltip').css({'position': 'absolute', 'top': tPosY, 'left': tPosX});
    };      

It works great, but I want to replicate how qtip (jquery plugin) works. At the moment when I move the mouse over the READ MORE text (the event in the code), the appended div follows the mouse around the READ MORE text.

I would like it instead to have it positioned in a fixed position from the READ MORE text.

Any ideas why its doing this?

Answer 1

I was trying to get something working using the jQuery functions Offset and Position but they wouldn’t return anything. Maybe it was just how I had it in jsfiddle? Idk, anyways, here is one approach: http://jsfiddle.net/jMYkS/1/

I add position relative to the span and place the div, positioned absolute inside of it. You can change the right/left and top/bottom values on the div to move it around relative to the span.