JQuery tooltip following mouse

Question

I would just like to have a tooltip that follows the mouse when it hovering over a div. I would like to use this:

http://flowplayer.org/tools/tooltip/

And it works for me, but I can't get the tooltip to actually follow the mouse when moving the mouse pointer. I know this sounds like a dumb question, but there is no demonstration of this feature on their website, so I have to wonder if it is supported. Does anyone know how to make this work? Thanks for your input and time!

Answer 1

I found this one on my website.

but I would make it mine ... just to help a little, a small example.

<style>
    .item {
        position: relative;
        width: 100px;
        height: 40px;
        top: 200px;
        left: 400px;
        background: #CCC;
    }

    .item .tooltip {
        position: fixed; /** depends on how it handles the e.pageX and e.pageY **/
        width: 80px;
        height: 30px;
        background: #06F;
        z-index: 10;
        display: none; /**let the tooltip be not visable, when startup **/
    }
</style>

<script type="text/javascript">
    $(document).ready(function() {

        $(".item").mousemove(function(e) { 

            // put other effect in when moving over the element

            // from e you can get the pageX(left position) and pageY(top position) 
            // im not sure if it was the relative or the absolute position
            // i added 10 pxs on the top and left to show the tooltip a bit after
            $('.tooltip').css('left', e.pageX + 10).css('top', e.pageY + 10).css('display', 'block');

        });

        $(".item").mouseout(function() { 
            $('.tooltip').css('display', 'none');
        });

    });
</script>

<div class="item">
    <p>This is my item</p>
    <div class="tooltip">Tooltip</div>
</div>

.. ,

Answer 2

w.r.t. http://flowplayer.org/tools/demos/tooltip/dynamic.htm,

// initialize tooltip
$("#dyna img[title]").tooltip({

   // tweak the position
   offset: [10, 2],

   // use the "slide" effect
   effect: 'slide'

// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: 'down', bounce: true } })

// Additional code : BEGIN
.mousemove(function(evt) {$(".tooltip").css({
    left:(evt.pageX - $.tools.tooltip.conf.offset[1]),
    top:(evt.pageY - $.tools.tooltip.conf.offset[0])
});})
// Additional code : END

;

, .:)

Answer 3

-,

<script>
$("#demo img[title]").tooltip();
</script>

<script>
$("#demo img[title]").tooltip();
$(".tooltip").css('position','absolute');
$("#demo").mousemove(function(e) {
    var x_offset = -100;
    var y_offset = -130;
    $('.tooltip').css('left', e.pageX + x_offset).css('top', e.pageY + y_offset);
});
</script>

jQuery mousemove . CSS position absolute, .

Answer 4

TrackStar, .

http://plugins.jquery.com/project/TrackStar

Answer 5

:

$( ".selector" ).tooltip({ track: true });

JQuery API,