CODEWITHSUNDEEP
jqueryhtmljquery-plugins
Guiness9889
Guiness9889

Reputation: 71

Jquery tooltip that follows mouse

I'd like to simply have a tooltip that follows the mouse when it is hovered over a div. I'd like to use this one:

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

And i have it working, however i can't get the tooltip to actually follow the mouse when the mouse pointer moves. I know that sounds like stupid question but their site doesn't have any demo of this functionality so i'm left wondering if it is supported. Would anyone know how to make this work? Thanks for your input and time!

Upvotes: 3

Views: 19020

Answers (5)

Yoram de Langen
Yoram de Langen

Reputation: 5499

I'd found this on their site.

I would make my own.. just to help you out little:

<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 effects 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');

            // or in a simpler way:
            $('.tooltip').css({
                left: e.pageX + 10,
                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>

If I were you make your own tooltip but it's up to you what you want.

UPDATE

Of 3 years later... And of course, nowadays you should add a debounce or throttle.

Upvotes: 9

fakt00r
fakt00r

Reputation: 33

Set option track to true:

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

JQuery API, tooltip widget

Upvotes: 2

Rich Goldman
Rich Goldman

Reputation: 51

I wrote a plugin called TrackStar that does exactly this.

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

Upvotes: 2

whjou
whjou

Reputation: 156

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

// 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

;

Please tweak the positioning yourself. :)

Upvotes: 5

Trey Hunner
Trey Hunner

Reputation: 11814

Using the example on their website you could turn this

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

into this

<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>

This uses the jQuery mousemove event and mouse positioning information. The CSS position of the tooltip is set to absolute so it will properly follow the mouse.

Upvotes: 3

Related Questions