comment faire l'info-bulle suivre le curseur

Question

Comment obtenir une info-bulle pour suivre le curseur. Mon info-bulle apparaît en bas à droite. Juste un morceau apparaît:

Voici le code:

$(document).ready(function(e) 
{ 
    // By suppling no content attribute, the library uses each elements title attribute by default 
    $('#visualization').qtip({ 
     // Simply use an HTML img tag within the HTML string 
     content: 'i am a qtip' 
    }); 
}); 

Answer 1

Je ne sais rien au sujet de qtip comme une bibliothèque, mais d'abord je vérifier pour voir si elles ont toutes les options à passer pour atteindre ce comportement. Même s'ils le font, il est bon de savoir comment les choses fonctionnent de toute façon!

Pour le faire manuellement, vous devriez utiliser CSS pour donner à votre élément infobulle position: fixed; puis utiliser javascript pour obtenir les coordonnées x et y de votre souris, la mise à jour left et top CSS attributs à chaque fois que la souris se déplace.

Voici un exemple!

$(document).on("mousemove", function(event) { 
 
    $("#log").text("pageX: " + event.pageX + ", pageY: " + event.pageY); 
 
    $(".tooltip").css({ 
 
    "left" : event.pageX, 
 
    "top" : event.pageY 
 
    }); 
 
});

.tooltip { 
 
display: inline-block; 
 
position: fixed; 
 
padding: .5em 1em; 
 
background-color: #f1f1f1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h4 id="log">pageX: -, pageY: -</h4> 
 
<div class="tooltip">I'm a tooltip!</div>