Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Popover

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