jQuery: fenêtre flottante d'information de la manière la plus élégante et la plus efficace

Question

Je souhaite implémenter une fenêtre flottante d'information (ou comment l'appeler), qui apparaît lorsque le curseur est sur un élément et reste à une distance fixe au curseur. Par exemple quelque chose de plus moins comme ici:

http://www.nytimes.com/interactive/2008/09/15/business/20080916-treemap-graphic.html

Say, j'ai 100 pour divs que je veux la fenêtre contextuelle apparaisse. Je pensais à le faire de deux façons:

1. Pour chaque div, dans le code HTML J'ai un div pop-up caché, sur mousemove je le montre, passer à la position du curseur et sur mouseleave je le cache. Chaque div a ses événements mousemove (x100) et mouseenter (x100). J'ai un seul mousemove pour la zone principale de la page, pour chaque div mouseenter et mouseleave Je montre/cache une fenêtre contextuelle. Il y a un seul mousemove (x1) et mouseenter + mouseleave pour chaque div (x100).

Mes questions sont les suivantes:

1. Est-ce la voie? Ou y a-t-il un meilleur mécanisme jQuery à utiliser?

2. Y at-il une différence de performance lorsque j'ai un seul mousemove et 100 mousemove rappels?

Answer 1

informations flottantes pop-up (ou comment l'appeler)

ces sont appelés infobulles (il y a many javascript/plugins jQuery pour ces)

en ce qui concerne vos propres modèles , vous semblez avoir compris, vous devrez créer mouseover/mousemove/mouseout événements pour les divs. Avec jQuery cela ressemblerait à quelque chose comme:

var $tooltip = $('#tooltip'), // reusable jQuery obj 
    offset = {x: 20, y: 20}; // tooltip offset from the cursor 

$('#container div').mouseover(function() { // over 
    $tooltip.show() 
}).mousemove(function(e) { // move 
    // set the positioning with offset 
    $tooltip.css({left: e.pageX + offset.x, top: e.pageY + offset.y}) 
    // set the tooltip HTML contents 
    $tooltip.html('[your content]'); 
}).mouseout(function() { // out 
    $tooltip.hide(); 
}); 

example jsfiddle

En ce qui concerne la performance: jsperf - mousemove parent vs children

réglage de l'événement mousemove sur le conteneur n'indique un fonctionnement plus rapide/sec dans le cas de test ci-dessus mais en utilisation dans le monde réel, il est peu probable que vous remarquiez une différence.

est ici un exemple où seul événement mousemove de conteneur est mis

example jsfiddle #2

Answer 2

Avez-vous simplement envisagé d'utiliser premaid plugin pour jquery comme qTip? http://craigsworks.com/projects/qtip2/download