Popovers in Bootstrap 5

Popovers sono simili alle punte di strumenti ma contengono maggiori informazioni su un determinato elemento e mostrano il suo contenuto solo quando un utente fa clic su di essi. I popover possono essere respinti solo facendo clic sull'elemento. Lo scopo di Popover è quello di dare conoscenza dell'utente sul sito Web o come usarlo. Viene anche usato per fornire conoscenze descrittive su un prodotto quando l'utente lo richiede.

Questo articolo ti racconta

• Processo di creazione di Popover
• Posizioni di popover
• Chiusura di popover
• Popover su Hovering

Come creare popovers

Per creare un popover, aggiungi data-bs-toggle = "popover" E title = "Il testo dell'intestazione di popover va qui" per la sezione intestazione di Popover e Data-Bs-Content = "Il testo del corpo di popover va qui" Per la sezione del corpo di Popover.

Codice

Clic

Questo processo crea e abilita un popover di base.

Posizioni di popover

Quindi i popovers sono anche posizionati proprio come le descrizioni degli strumenti, per posizionare un uso di popover Data-BS-Placement = "superiore/in basso/destra/sinistra" attributo con Data-BS-Toggle, titolo E Data-B-Content attributi.

Codice

Posizioni di popover

Superiore
Buttom



Sinistra
Giusto

Ecco come vengono specificate le posizioni di popover.

Closing Popovers

I popover sono chiusi solo quando si fa clic su Elemento o Pulsante a cui si fa clic per renderlo visibile. Tuttavia, se si desidera chiudere il popover facendo clic su ovunque sullo schermo, basta aggiungere data-bs-trigger = "focus" attributo al tuo pulsante o elemento.

Codice

Chiusura di popover

Cliccami

Questo processo chiude un popover quando fai clic su ovunque sullo schermo.

Popover su Hover

Come sappiamo che i popovers sono visibili solo quando fai clic su un pulsante o un elemento, ma se si desidera che quella popolazione sia visibile solo molendo il cursore sull'elemento o sul pulsante proprio come la descrizione degli strumenti, quindi aggiungi il data-bs-trigger = "hover" attributo al tuo pulsante o elemento.

Codice

Popover su Hover

Molare

Ecco come appare il popolo in bilico.

Conclusione

Popover viene creato aggiungendo il data-bs-toggle = "popover" attributo. La sua intestazione è creata aggiungendo Titolo = "Testo di intestazione" attributo e il suo corpo viene creato aggiungendo il Data-BS-Content = "Testo del corpo" attributo al tuo elemento o pulsante. Per consentire a Popover di scrivere un codice JavaScript come scritto nell'articolo. Poiché Popover viene chiuso solo facendo clic sull'elemento o sul pulsante, quindi per la chiusura facendo clic su ovunque sullo schermo basta aggiungere data-bs-trigger = "focus" attributo e se si desidera aprire il popover sospeso il cursore aggiungi solo attributo data-b-trigger = "hover".