TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare popover Bootstrap 5?

3

Il popover non è altro che un tooltip più grande mostrato in una finestra popup e che punta verso l’elemento attivato. Simile al componente Tooltip Bootstrap, il componente popover richiede anche una libreria JavaScript di terze parti popper.min.js per il posizionamento. Puoi fare riferimento al modello di avvio completo di Bootstrap per utilizzare i file CSS e script richiesti.

Tutorial sui popover di Bootstrap 5

  1. Iniziare con il popover Bootstrap
  2. Inizializzazione del componente Bootstrap
  3. Popover sui pulsanti
  4. Posizionamento del popover
  5. Popover annullabile
  6. Personalizzazione del popover

1 Iniziare con Popover

Prima di utilizzare il componente popover, ricorda quanto segue:

  • Popover necessita di un plug-in di tooltip, il che significa che dovresti includere il file "bootstrap.min.js" nel tuo modello HTML.
  • Ha anche bisogno di una libreria JavaScript di terze parti "popper.min.js" per un posizionamento appropriato.
  • Con Bootstrap 4, puoi utilizzare il file precompilato "bootstrap.bundle.min.js" contenente "bootstrap.min.js" e "popper.min.js".
  • Per migliorare le prestazioni di caricamento della pagina, per impostazione predefinita il popover non verrà caricato sulla pagina. Dovresti inizializzare esplicitamente con l’elemento genitore per caricare il popover.
  • Il popover non verrà mostrato se non ci sono titoli o contenuti all’interno del popover.
  • Il popover predefinito si nasconderà solo se si fa nuovamente clic sull’elemento attivato. In caso contrario verrà mostrato anche scorrendo il contenuto della pagina.
  • Il popover ignorabile verrà nascosto quando fai clic su un punto qualsiasi.

2 Inizializzazione di Popover

Come i tooltip, anche i popover devono essere inizializzati prima dell’uso. Il modo più generico è inizializzare globalmente come di seguito:

<script> $(function() { $('[data-toggle="popover"]').popover() }) </script>

Se vedi che gli stili interferiscono con il codice con il popover, puoi definire un contenitore separato per un elemento specifico.

<script> $(function() { $('.example-popover').popover({ container: 'body' }) }) </script>

Ricorda di includere lo script di inizializzazione subito dopo gli script "popper.min.js" e "bootstrap.min.js".

3 Popover sul pulsante

Iniziamo ad aggiungere un popover su un elemento pulsante:

<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Large Button Element </button>

Nel caso in cui tu abbia inizializzato per body, dovresti aggiungere l’attributo data-container="body" al pulsante.

Mentre i suggerimenti vengono visualizzati al passaggio del mouse, i popover vengono visualizzati solo dopo aver fatto clic sull’elemento. Nel codice di esempio sopra, facendo clic sull’elemento pulsante si attiverà la finestra popup nella giusta direzione come mostrato di seguito:

Come creare popover Bootstrap 5?

4 Popover di posizionamento

I popover possono essere posizionati in quattro direzioni: sinistra, destra, in alto e in basso rispetto all’elemento di attivazione. Si ottiene utilizzando l’attributo "data-placement" come il codice seguente:

<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="left" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Popover on Left </button> <button type="button" class="btn btn-danger" data-toggle="popover" data-placement="right" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Popover on Right </button> <button type="button" class="btn btn-info" data-toggle="popover" data-placement="top" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Popover on Top </button> <button type="button" class="btn btn-success" data-toggle="popover" data-placement="bottom" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Popover on Bottom </button>

Di seguito sono riportati i diversi posizionamenti dei popover:

Come creare popover Bootstrap 5?

5 Popover ignorabili

Per impostazione predefinita, il popover apparirà quando si fa clic sull’elemento e scomparirà quando si fa nuovamente clic sull’elemento. Non scomparirà quando si fa clic a caso sulla pagina al di fuori dell’elemento. Puoi creare un popover annullabile utilizzando il codice seguente:

<a tabindex="0" class="btn btn-lg btn-warning" role="button" data-toggle="popover" data-trigger="focus" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Dismissble Popover on A Tag </a>

L’attributo data-trigger = "focus" viene utilizzato in modo che il popover appaia / scompaia all’evidenziazione con il tasto tab della tastiera.

Come creare popover Bootstrap 5?

Nota che il tag viene utilizzato al posto di

Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More