Le meilleur didacticiel Fondation ballon en 2024, dans ce didacticiel, vous pouvez apprendre
position d'affichage de Balloon,ballon rond,
Fondation ballon
Ballons déplacer la souris sur l'élément après le spectacle:
Nous pouvons ajouter tout élément dans le data-tooltip
propriété pour créer un message. Utilisez le title
attribut pour définir les conseils de message texte.
Remarque: Le curseur nécessite JavaScript. Donc, vous devez initialiser fondationcanadiennede JS:
Exemples
<Span titre data-tooltip = " Hourra!"> Hover sur moi! </ Span>
<! - Initialisation Fondation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Essayez » .has-tip
classe peut déplacer le texte en gras de la souris:
Exemples
<Span class data-tooltip = " a-tip" title = "Hourra!"> Hover sur moi! </ Span>
Essayez »
position d'affichage de Balloon
Par défaut, la boîte de message apparaîtra au 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 la boîte rapide.
Remarque: Sur les écrans de petite taille, ballon à large bande est de 100%.
Exemples
<Span class data-tooltip = " a-tip tip-top" title = "Hourra!"> Top </ span>
<Span class data-tooltip = " a-tip tip-bas" title = "Hourra!"> Bas </ span>
<Span data-infobulle class = " a-tip tip-gauche" title = "Hourra!"> Gauche </ span>
<Span class data-tooltip = " a-tip tip-droite" title = "Hourra!"> Droit </ span>
Essayez »
ballon rond
.radius
et .round
classe est utilisée pour définir la zone des bouts arrondis:
Exemples
<Span class data-tooltip = " a-tip" title = "Hourra!"> Par défaut </ span>
<Span class data-tooltip = " a-tip rayon" title = "Hourra!"> Radius </ span>
<Span data-infobulle class = " a-bout rond" title = "Hourra!"> Round </ span>
Essayez »