Bootstrap - Popovers: Guida per Principianti

Ciao a tutti, aspiranti sviluppatori web! Oggi esploreremo il meraviglioso mondo dei Popovers di Bootstrap. Non preoccupatevi se siete nuovi a questo; vi guiderò attraverso ogni passo con la stessa pazienza che ho usato nelle mie lezioni per anni. Alla fine di questo tutorial, sarete in grado di gestire i popovers come un professionista!

Bootstrap - Popovers

Cos'è un Popover?

Prima di immergerci, capiamo cos'è un popover. Immagina di leggere un libro e di vedere una piccola asterisco accanto a una parola. Quando guardi in fondo alla pagina, trovi ulteriori informazioni su quella parola. Questo è essenzialmente ciò che fa un popover su una pagina web - fornisce informazioni aggiuntive quando un utente interagisce con un elemento.

Abilitare i Popovers

Prima di tutto, dobbiamo abilitare i popovers. È come accendere la luce prima di iniziare a leggere - devi impostare alcune cose prima di poterle utilizzare.

Per abilitare i popovers, devi includere i file JavaScript e CSS di Bootstrap nel tuo documento HTML. Ecco come farlo:

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Popovers</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Il tuo contenuto va qui -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>

Questo codice imposta la struttura di base di un documento HTML e include i file CSS e JavaScript di Bootstrap. Lo script in fondo inizializza tutti i popovers sulla pagina.

Creare un Popover

Ora che abbiamo impostato la scena, creiamo il nostro primo popover! È semplice come aggiungere few attributi a un pulsante.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Titolo del Popover" data-bs-content="Ecco alcuni contenuti fantastici. È molto coinvolgente. Non trovate?">Clicca per attivare il popover</button>

Ecco una spiegazione:

class="btn btn-lg btn-danger": Rende il nostro pulsante grande e rosso.
data-bs-toggle="popover": Dice a Bootstrap che questo elemento dovrebbe attivare un popover.
title="Titolo del Popover": Imposta il titolo del nostro popover.
data-bs-content="...": È il contenuto principale del nostro popover.

Posizionamento del Popover

Come arredare i mobili in una stanza, puoi posizionare il tuo popover in diversi modi. Bootstrap ti permette di piazzare i popovers in alto, a destra, in basso o a sinistra di un elemento.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Popover in alto">
Popover in alto
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Popover a destra">
Popover a destra
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Popover in basso">
Popover in basso
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Popover a sinistra">
Popover a sinistra
</button>

L'attributo data-bs-placement determina dove il popover appare rispetto al pulsante.

Popovers Personalizzati

Vuoi aggiungere un tocco personale ai tuoi popovers? Puoi personalizzarli con il tuo own contenuto HTML!

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-html="true" title="<h3>Titolo Personalizzato</h3>" data-bs-content="<b>Contenuto in grassetto</b>. <a href='#'>Link</a> incluso.">
Popover con HTML Personalizzato
</button>

Qui, abbiamo impostato data-bs-html="true" per permettere l'uso di HTML nel contenuto del popover. Ora possiamo usare tag HTML nel titolo e nel contenuto!

Popover Non Chiudibile

A volte, vuoi che il tuo popover rimanga visibile fino a quando l'utente non lo chiude esplicitamente. È qui che i popovers non chiudibili diventano utili.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Popover non chiudibile" data-bs-content="Ecco alcuni contenuti fantastici. È molto coinvolgente. Non trovate?">Popover non chiudibile</a>

La chiave qui è data-bs-trigger="focus". Questo significa che il popover rimarrà aperto fino a quando l'utente non clicca altrove sulla pagina.

Popover alla Sospensione

Vuoi che il tuo popover appaia quando l'utente passa il mouse su un elemento? Facile!

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top" data-bs-content="Passa il mouse su di me!">
Popover alla sospensione
</button>

L'attributo data-bs-trigger="hover" fa apparire il popover alla sospensione del mouse.

Popover sugli Elementi Disabilitati

Normalmente, gli elementi disabilitati non attivano interazioni utente. Ma con un piccolo trucco, possiamo fare apparire i popovers anche su di loro!

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Popover disabilitato">
<button class="btn btn-primary" type="button" disabled>Pulsante disabilitato</button>
</span>

Includiamo il nostro pulsante disabilitato in un <span> che gestisce l'attivazione del popover.

Opzioni

Bootstrap offre una varietà di opzioni per personalizzare i tuoi popovers. Ecco una tabella di alcune opzioni comuni:

Opzione	Tipo	Predefinito	Descrizione
animation	boolean	true	Applica una transizione CSS di dissolvenza al popover
container	string \| element \| false	false	Aggiunge il popover a un elemento specifico
content	string \| element \| function	''	Contenuto predefinito se l'attributo `data-bs-content` non è presente
delay	number \| object	0	Ritardo nella visualizzazione e nascondimento del popover (ms)
html	boolean	false	Permette l'uso di HTML nel popover
placement	string \| function	'right'	Come posizionare il popover
selector	string \| false	false	Se fornito un selettore, gli oggetti popover saranno delegati ai target specificati
template	string	`<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>`	HTML di base da usare quando si crea il popover
title	string \| element \| function	''	Valore predefinito del titolo se l'attributo `title` non è presente
trigger	string	'click'	Come viene attivato il popover - click \| hover \| focus \| manual

Puoi usare queste opzioni quando inizializzi i popovers con JavaScript:

var popover = new bootstrap.Popover(document.querySelector('#example'), {
trigger: 'hover',
placement: 'top'
})

Ecco fatto! Ora sei un esperto di Bootstrap Popover. Ricorda, la chiave per padroneggiare questo (e qualsiasi concetto di coding) è la pratica. Quindi vai avanti, gioca con questi esempi, mescola e abbinale, e crea qualcosa di fantastico. Buon coding!

Credits: Image by storyset

Tutorial precedente:

Bootstrap - Segnaposti

Prossimo tutorial:

Bootstrap - Barra di avanzamento