Comment créer une info-bulle avec jQuery

Voici une idée simple pour créer un message d'info-bulles avec jQuery.

Idée…

Identifiez les «target» qui doivent afficher le message des info-bulles.
Créez un message d'info-bulles et un style CSS pour celui-ci.
Trois fonctions, -showTooltips,hideTooltips,changeTooltipsPosition.
Pendant que la souris saisit «target», utilisezshowTooltips pour afficher le message des info-bulles et initialisez la position avecchangeTooltipsPosition.
Pendant que la souris se déplace autour des «target», continuez à changer la position du message des info-bulles avecchangeTooltipsPosition.
Pendant que vous quittez la «cible», utilisez hideTooltips pour masquer le message d'info-bulles.
Utilisez jQuery pour le faire :)

1. Cible

Le «conseil» et «l'étiquette du nom d'utilisateur» sont la cible pour afficher le message d'info-bulles.

Username : 
hint (mouseover me)

2. Info-bulles CSS

Créez un style CSS pour le message d'info-bulles.

.tooltip{
    margin:8px;
    padding:8px;
    border:1px solid blue;
    background-color:yellow;
    position: absolute;
    z-index: 2;
}

3. Afficher les infobulles

Ajoutez le message d'info-bulles à la balise «body» et initialisez la position du message d'info-bulles.

var showTooltip = function(event) {
   $('div.tooltip').remove();
   $('I\' am tooltips! tooltips! tooltips! :)')
     .appendTo('body');
   changeTooltipPosition(event);
};

5. Modifier les info-bulles

Modifiez la position du message d'info-bulles.

var changeTooltipPosition = function(event) {
    var tooltipX = event.pageX - 8;
    var tooltipY = event.pageY + 8;
    $('div.tooltip').css({top: tooltipY, left: tooltipX});
};

6. Masquer les info-bulles

Masquez le message d'info-bulles.

var hideTooltip = function() {
    $('div.tooltip').remove();
};

7. Bind It

Liez les événements de souris à la cible.

$("span#hint,label#username'").bind({
    mousemove : changeTooltipPosition,
    mouseenter : showTooltip,
    mouseleave: hideTooltip
});

Essayez-le vous-même

Dans cet exemple, passez la souris sur l'indicateur ou l'étiquette pour afficher l'effet des info-bulles.












jQuery tooltips example

Username : 
hint (mouseover me)

Essayez la démo

TOC

Comment créer une info-bulle avec jQuery