Find position of state on hover?

[superpowered]

Hi, This script has been super helpful on my project.

However I'm running into one issue. I have it so when a user hovers a state, a little tooltip appears by the mouse with info about the state. That's working great and looks fantastic, however I've been noticing that it just eats CPU, since I have to repaint the tooltip every time the mouse moves.

I'm wondering if theres a way to find the center of the object that is hovered, and then bind the tooltip object to that as opposed to the mouse position? That way it would only run one repaint per hover. Any thoughts?

I'm running this so far:

mouseover: function(event, data)
        {
            $('.map-hover').removeClass('active');
            $mapinfo.addClass('active');
            $('#'+(data.name)).addClass('active');
            hovered = true;
        },
        mouseout: function(event, data)
        {
            $('.map-hover').removeClass('active');
            $mapinfo.removeClass('active');
            hovered = false;
        },
//etc..

$(document).bind('mousemove', function(e)
        {
            if(hovered)
            {
                lefty = e.pageX -220;
                if(lefty < 220)
                {
                    lefty =  e.pageX +20;
                    $mapinfo.addClass('lefted');
                }
                else
                {
                    $mapinfo.removeClass('lefted');
                }
                $mapinfo.css(
                {
                    left:  lefty,
                    top:   e.pageY
                });
            }

        }); 

[digitaccel]

Hi superpowered,

I know you left this a long time ago but I just did this as I was having the same problem. I used a timer to wait until the mouse has stopped before I display the tooltip. This now works as most tooltips do. Let me know if you are still looking and I'll add the code.