Popover
Il Popover è una componente che viene richiamato al click e fornisce informazioni su un determinato elemento, comando o interazione.
Posizionamento
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="container">
<div class="row">
<div class="col-12 col-md-4 offset-md-4">
<button type="button" class="btn btn-secondary" data-container="body" data-bs-toggle="popover" data-bs-placement="top"
title="Titolo del Popover" data-bs-html="true"
data-bs-content='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue.
<a href="#" class="popover-inner-link">altro ...</a>'>
Popover in alto
</button>
</div>
</div>
<div class="row mt-4">
<div class="col-12 col-md-4">
<button type="button" class="btn btn-secondary" data-container="body" data-bs-toggle="popover" data-bs-placement="right"
title="Titolo del Popover"
data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue.">
Popover a destra
</button>
</div>
<div class="col-12 col-md-4 offset-md-4">
<button type="button" class="btn btn-secondary" data-container="body" data-bs-toggle="popover" data-bs-placement="left"
title="Titolo del Popover"
data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue.">
Popover a sinistra
</button>
</div>
</div>
<div class="row mt-4">
<div class="col-12 col-md-4 offset-md-4">
<button type="button" class="btn btn-secondary" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom"
data-bs-html="true"
title="Titolo del Popover"
data-bs-content='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue.
<a href="#" class="popover-inner-link">altro ...</a>'>
Popover in basso
</button>
</div>
</div>
</div>
Posizione del Popover
Può essere diversa da quella impostata con l’attributo data-bs-placement qualora non ci sia sufficiente spazio per disegnare il componente.
Nell’esempio qui sopra infatti, se si preme il tasto Popover in alto e poi si fa scorrere la pagina verso il basso, si vedrà il popover spostarsi al di sotto del bottone.
Abilitazione
Per abilitare il funzionamento dell’esempio è stato inserito nella pagina il seguente codice:
<script>
document.addEventListener("DOMContentLoaded", function() {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
})
</script>Documentazione tecnica:
Per le altre modalità possibili sia di abilitazione dei popover sia di impostazione del tipo di comparsa e scomparsa di questi componenti, si veda la relativa pagina