Comment créer et positionner une infraction dans Bootstrap 5

Comment créer et positionner une infraction dans Bootstrap 5

L'infiltration est une petite boîte contextuelle qui apparaît lorsqu'un utilisateur déplace le curseur sur un bouton ou un lien qui donne à l'utilisateur, des connaissances ou une indice sur ce bouton ou lien spécifique. Les infractions sont utiles pour les nouveaux utilisateurs d'un site Web pour les sauver de la confusion ou de tout type de problème lors de l'exploration de votre site Web.

Cet article vous apprendra sur

  • Création d'infiltrations dans Bootstrap 5
  • Positionner les infractions

Comment créer une infraction

Pour créer une usine à référence, l'attribut de données "Data-Bs-Toggle = ”Info-tool" dans ton tag ou tag et le texte affiché dans l'infiltration doit être écrit à l'aide de l'attribut de titre.





Info-bulle avec lien




Placer le curseur ici


Info-bulle avec bouton









$ (document).ready (function ()
$ ('[data-bs-toggle = "info-bulle"]').ToolTip ();
);




Maintenant, permettez-moi de vous dire que dans Bootstrap 5 pour créer une info-bulle, nous devons ajouter des attributs de données dans tag ou tag et écrivez également une jQuery pour l'activer. Alors je divise le processus de création en étapes qui vous donneront une meilleure compréhension.

Pas

La création d'une info-bulle dans Bootstrap 5 est un processus simple en deux étapes

Étape 1: Ajouter data-bs-toggle = ”info-toolt” et title = ”Le texte de l'info-bulle va ici» attributs dans votre ou tag.


Info-bulle avec lien




Placer le curseur ici


Info-bulle avec bouton





Étape 2: Activer les infractions en écrivant JQuery suivant le code

Positionnement des infractions

Donc pour positionner une info-bulle comme exigence Ajouter l'attribut Data-Bs-Placement = ”Top / Dright / Left / inférieur” à ton ou tag Pour modifier la position des infractions.






Conclusion

Les info-bulleurs sont créées en ajoutant data-bs-toggle = ”info-toolt” et title = ”Le texte de l'info-bulle va ici» attribut dans ou tag et l'activer en écrivant un code javascript. Pour le positionnement juste Ajouter un attribut ou une balise de data-bs-place = ”top / inférieur / gauche / gauche”.