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">LEGGI TUTTO</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">LEGGI TUTTO</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.

Icone

All’interno del popover è possibile inserire delle icone, nel modo mostrato nel codice dell’esempio:

1
2
3

<button id="iconexe1" type="button" class="btn btn-secondary fade show" data-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" title="<svg class='icon'><use href='/bootstrap-lombardia/dist/svg/sprites.svg#it-info-circle'></use></svg>Titolo con icona" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue.<a href='#' class='popover-inner-link'>Leggi tutto<svg class='icon'><use href='/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right'></use></svg></a>">
Popover con icone
</button>

Abilitazione

Per abilitare il funzionamento dei popover negli esempi è 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)
    })
    var popover = new bootstrap.Popover(document.querySelector('#iconexe1'), {
      sanitize: false,
    })  
  })    
</script>

In particolare l’opzione sanitize: false va specificata se il popover contiene delle icone.

Sfondo grigio

Lo si ottiene specificando: data-bs-custom-class="grey-bg"

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-custom-class="grey-bg"
        data-bs-content='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue.
               <a href="#" class="popover-inner-link">LEGGI TUTTO</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-custom-class="grey-bg"
        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-custom-class="grey-bg"
        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" data-bs-custom-class="grey-bg"
        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">LEGGI TUTTO</a>'>
        Popover in basso
      </button>
    </div>
  </div>
</div>

Specifiche Tecniche:

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