jquery affichage flottant div

Question

Lorsque l'utilisateur survole un élément spécifique, je souhaite afficher un div (vers le haut et vers la droite) sur lequel il peut cliquer pour faire apparaître une boîte de dialogue. La div apparaîtrait presque comme une info-bulle. Le div disparaîtrait quand ils resteraient.

Answer 1

Voici le lien que vous recherchez. C'est un plugin d'info-bulle très pratique que j'ai utilisé plusieurs fois. Il est facile à modifier et à étendre pour tous vos besoins particuliers.

Vive.

Answer 2

Vous pouvez coder vous-même assez facilement avec une combinaison de .hover(); et CSS

$("div.someclass").hover(function(){ 
    $("div.someclass div.tooltip").show(); //or use fade in 
}, function(){ 
    $("div.someclass div.tooltip").hide(); //or use fade out 
}); 

En supposant que vous ne souhaitez pas utiliser le plugin décrit dans l'autre réponse

Answer 3

Si vous voulez faire rapidement le vôtre pour un seul endroit, c'est facile à faire.

Code jquery:

$('[id$=idOfElement]').mouseover(function() { 
    $('[id$=divToShow]').show(); 
}).mouseout(function() { 
    $('[id$=divToShow]').hide(); 
}); 

html:

<div ID="div_Tooltip" style="display:none; position:absolute; top:0; left:100px;"> Content to Show </div>

Tout ce que vous devez faire est de placer absolument le div exactement où vous voulez faire apparaître. Cependant, si vous avez plusieurs info-bulles sur une page, j'utiliserai un plugin tel que celui recommandé par JimP.

Answer 4

Jetez un oeil à le plugin jQuery ClueTip, il est capable de gérer la fonctionnalité que vous cherchez