Jquery Tooltip, der Maus folgt

Question

Ich möchte einfach eine QuickInfo, die der Maus folgt, wenn es über einem Div schwebt. Ich möchte diese verwenden ein:

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

und ich habe es funktioniert, aber ich kann nicht den Tooltip erhalten, um tatsächlich die Maus zu folgen, wenn sich der Mauszeiger bewegt. Ich weiß, dass das wie eine blöde Frage klingt, aber ihre Seite hat keine Demo dieser Funktionalität, also frage ich mich, ob sie unterstützt wird. Würde jemand wissen, wie man das macht? Danke für deine Eingabe und Zeit!

Answer 1

ich hätte this auf ihrer Website gefunden.

, aber ich würde ein aus meiner eigenen machen .. nur aus u wenig zu helfen, ein kleines Beispiel ..

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

Wenn ich Sie Ihren eigenen Tooltip machen .. aber es ist an Ihnen, was Sie wollen

Answer 2

wrt http://flowplayer.org/tools/demos/tooltip/dynamic.htm, versuchen Sie

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

; 

Bitte zwicken Sie die Positionierung selbst. :)

Answer 3

Am Beispiel auf ihrer Website könnten Sie machen diese

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

in diesem

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

Dies verwendet die jQuery mousemove event und mouse positioning information. Das CSS position der QuickInfo wird auf absolute gesetzt, damit es der Maus richtig folgt.

Answer 4

Ich schrieb ein Plugin namens TrackStar, das genau dies tut.

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

Answer 5

Set Option Spur zu wahr:

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

JQuery API, tooltip widget