Info-bulle Foundation

L'info-bulle s'affiche lorsque la souris passe sur l'élément :

Nous pouvons ajouter à n'importe quel élémentdata-tooltipun attribut pour créer une info-bulle. Utiliseztitleun attribut pour définir le texte de l'info-bulle.

Remarque :Le curseur nécessite JavaScript. Vous devez donc initialiser Foundation JS :

Exemple

<span data-tooltip title="Youpi !">Survolez-moi !</span>

<!-- Initialiser Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

Essayez-le vous-même »

.has-tipLa classe peut mettre en gras le texte de survol :

Exemple

<span data-tooltip class="has-tip" title="Youpi !">Survolez-moi !</span>

Essayez-le vous-même »

Position d'affichage de l'info-bulle

Par défaut, l'info-bulle apparaît en bas de l'élément.

Vous pouvez utiliser.tip-top, .tip-left, .tip-right ou .tip-bottom(Par défaut) Pour définir la position de l'info-bulle.

Remarque :Sur les écrans de petite taille, la largeur de l'info-bulle est de 100%.

Exemple

<span data-tooltip class="has-tip tip-top" title="Hourra !">Haut</span>
<span data-tooltip class="has-tip tip-bottom" title="Hourra !">Bas</span>
<span data-tooltip class="has-tip tip-left" title="Hourra !">Gauche</span>
<span data-tooltip class="has-tip tip-right" title="Hourra !">Droite</span>

Essayez-le vous-même »

Info-bulle arrondie

.radiuset.roundLa classe est utilisée pour définir des info-bulles arrondies :

Exemple

<span data-tooltip class="has-tip" title="Hourra !">Par défaut</span>
<span data-tooltip class="has-tip radius" title="Hourra !">Rayon</span>
<span data-tooltip class="has-tip round" title="Hourra !">Arrondi</span>

Essayez-le vous-même »
autres extensions