Comment ajouter une info-bulle à un élément span ?

Question

Dans le code suivant, je souhaite qu'une info-bulle apparaisse lorsque l'utilisateur survole le span, comment puis-je faire cela? Je ne veux pas utiliser de liens.

text

Answer 1

Voici la manière simple et intégrée :

texte

Cela vous donne des info-bulles de texte simple. Si vous voulez des info-bulles riches, avec du HTML formaté, vous devrez utiliser une bibliothèque pour le faire. Heureusement, il y en a plein.

Answer 2

Tooltips personnalisés avec du CSS pur - pas besoin de JavaScript :

Exemple ici (avec le code) / Exemple en plein écran

Comme alternative aux tooltips par défaut de l'attribut title, vous pouvez créer vos propres tooltips CSS personnalisés en utilisant les pseudo-éléments :before/:after et les pseudo-éléments ainsi que les data-* attributs HTML5.

En utilisant le CSS fourni, vous pouvez ajouter un tooltip à un élément en utilisant l'attribut data-tooltip.

Vous pouvez également contrôler la position du tooltip personnalisé en utilisant l'attribut data-tooltip-position (valeurs acceptées : top/right/bottom/left).

Par exemple, ce qui suit ajoutera un tooltip positionné en bas de l'élément span.

Tooltip personnalisé en bas.

Comment cela fonctionne-t-il ?

Vous pouvez afficher les tooltips personnalisés avec les pseudo-éléments en récupérant les valeurs d'attributs personnalisés en utilisant la attr() fonction.

[data-tooltip]:before {
    content: attr(data-tooltip);
}

En ce qui concerne le positionnement du tooltip, utilisez simplement le sélecteur d'attribut et changez l'emplacement en fonction de la valeur de l'attribut.

Exemple ici (avec le code) / Exemple en plein écran

Le CSS complet utilisé dans l'exemple - personnalisez-le selon vos besoins.

[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: 4px;
}
/* Style du tooltip */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 100px;
    text-align: center;
    border-radius: 4px;
}
/* Centrage horizontal dynamique */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Centrage vertical dynamique */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Style/placement de la flèche du tooltip */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Centrage horizontal dynamique pour le tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Centrage vertical dynamique pour le tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}
/* Afficher le tooltip au survol */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}

Answer 3

Dans la plupart des navigateurs, l'attribut title s'affichera sous forme d'info-bulle, et est généralement flexible quant aux types d'éléments avec lesquels il fonctionnera.

Passez la souris pour une info-bulle !
stackoverflow.com

Tous ceux-ci afficheront des info-bulles dans la plupart des navigateurs.

Answer 4

Pour l'info-bulle de base, vous voulez :

 Survoler moi pour voir l'info-bulle!

Answer 5

L'attribut title sera utilisé comme texte pour l'infobulle par le navigateur. Si vous souhaitez lui appliquer un style, envisagez d'utiliser certaines bibliothèques, par exemple jQuery UI.