Popovers en bootstrap 5

popovers sont similaires aux info-bulleurs mais ils contiennent plus d'informations concernant un élément particulier et affichent son contenu que lorsqu'un utilisateur clique dessus. Les popovers ne peuvent être rejetées qu'en cliquant à nouveau sur l'élément. Le but de Popover est de donner à l'utilisateur Knowledg sur le site Web ou comment l'utiliser. Il est également utilisé pour donner des connaissances descriptives sur un produit lorsque l'utilisateur l'exige.

Cet article vous parle de

• Processus de création de popover
• Positions de popover
• Fermeture de fermeture
• Popover sur planant

Comment créer des popovers

Pour créer un popover, ajouter data-bs-toggle = ”popover” et Title = ”Le texte de l'en-tête popover va ici» pour la section d'en-tête de Popover et data-bs-content = ”Le texte du corps popover va ici» pour la section du corps de Popover.

Code

Cliquez sur

Ce processus crée et permet un popover de base.

Positions de popover

Les popovers sont donc également positionnés comme des infractions, pour positionner une utilisation de popover data-bs-place = ”top / inférieur / droit / gauche» attribuer data-bs-toggle, titre et Data-Bs-Contin les attributs.

Code

Positions de popover

Haut
Coup de poing



Gauche
Droite

C'est ainsi que les positions de popover sont spécifiées.

Popous de clôture

Les popovers ne sont fermées que lorsque vous cliquez à nouveau sur l'élément ou le bouton auquel vous cliquez avant pour le rendre visible. Cependant, si vous souhaitez fermer le popover en cliquant n'importe où sur l'écran, ajoutez simplement data-bs-trigger = "focus" Attribut à votre bouton ou élément.

Code

Fermeture de fermeture

Cliquez sur moi

Ce processus ferme un popover lorsque vous cliquez n'importe où sur l'écran.

Popover sur volant

Comme nous le savons, les popovers ne sont visibles que lorsque vous cliquez sur un bouton ou un élément, mais si vous voulez que ce popover soit visible simplement en oscillant le curseur sur l'élément ou le bouton tout comme l'info-bulle, ajoutez le data-bs-trigger = ”hover” Attribut à votre bouton ou élément.

Code

Popover sur volant

Flotter

C'est ainsi que Popover apparaît sur le plan en volants.

Conclusion

Le popover est créé en ajoutant le data-bs-toggle = «popover» attribut. Son en-tête est créé en ajoutant Titre = «Texte d'en-tête» l'attribut et son corps est créé en ajoutant le data-bs-content = "Texte du corps" Attribut à votre élément ou bouton. Pour permettre à Popover d'écrire un code JavaScript tel qu'il est écrit dans l'article. Comme Popover n'est fermé qu'en cliquant à nouveau sur l'élément ou le bouton, donc pour la fermeture en cliquant n'importe où sur l'écran, ajoutez simplement data-bs-trigger = "focus" Attribut, et si vous souhaitez ouvrir Popover en survolant le curseur, ajoutez l'attribut data-bs-trigger = "hover".