Unito.it

Tema Unito v3

Popover

Visualizza messaggi o informazioni a comparsa in prossimità di un altro elemento

I popover si basano sulla libreria di terze parti Popper.js. Per fare in modo che i popover funzionino è necessario includere popper.min.js prima di bootstrap-unito.js o usare la versione bundle che contiene già Popper.js. I popover funzionano sia con la tastiera che per gli utenti dotati di tecnologia assistiva.

Cose da sapere quando si utilizza il plugin popover:

  • I popover sono opt-in per ragioni di performance, quindi devi inizializzarli tu stesso con il codice che trovi di seguito.
  • I title e i content con valori vuoti non mostreranno mai popover.
  • Specifica container: 'body' per evitare problemi di rendering in componenti più complessi (come nei gruppi di input, gruppi di pulsanti, etc).
  • Attivare i popover su elementi nascosti non funzionerà.
  • I popover per gli elementi .disabled o disabled devono essere attivati da un elemento contenitore.
  • Quanto attivato da ancore che si estendono su più linee, i popover verranno centrati tra la larghezza complessiva delle ancore. Usa white-space: nowrap; sugli elementi <a> per evitare questo comportamento.
  • I Popover devono essere nascosti prima che i loro elementi corrispondenti siano stati rimossi dal DOM.

Abilitazione generale

Un modo per inizializzare tutti i popovers in una pagina è quello di selezionarli tramite il loro attributo data-bs-toggle:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Abilitazione con opzione container

Quando hai alcuni stili su un elemento genitore che interferiscono con un popover, è consigliato specificare un container personalizzato in modo che l’HTML del popover appaia invece all’interno di quell’elemento.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body',
})
<button type="button" class="btn btn-lg btn-danger fade show" data-bs-toggle="popover" title="Titolo del Popover" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue.">Clicca per attivare/disattivare il popover</button>

Direzioni

Sono disponibili quattro opzioni: allineato in alto, a destra, in basso e a sinistra.

<div class="container">
  <div class="row">
    <div class="col-12 col-md-4"></div>
    <div class="col-12 col-md-4">
      <button type="button" class="btn btn-danger fade show" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" title="Titolo del Popover" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue." style="width:100%;">
        Popover in basso
      </button>
    </div>
    <div class="col-12 col-md-4"></div>
  </div>
  <div class="row mt-4">
    <div class="col-12 col-md-4">
      <button type="button" class="btn btn-danger fade show" 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." style="width:100%;">
        Popover a destra
      </button>
    </div>
    <div class="col-12 col-md-4"></div>
    <div class="col-12 col-md-4 mt-4 mt-md-0">
      <button type="button" class="btn btn-danger fade show" 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." style="width:100%;">
        Popover a sinistra
      </button>
    </div>
  </div>
  <div class="row mt-4">
    <div class="col-12 col-md-4"></div>
    <div class="col-12 col-md-4">
      <button type="button" class="btn btn-danger fade show" data-container="body" data-bs-toggle="popover" data-bs-placement="top" title="Titolo del Popover" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue." style="width:100%;">
        Popover in alto
      </button>
    </div>
    <div class="col-12 col-md-4"></div>
  </div>
</div>

Modalità Hover

Per aprire il Popover all’hover del mouse sull’elemento, aggiungere l’attributo data-bs-trigger="hover" al tag dello stesso.

<button type="button" class="btn btn-danger fade show" data-container="body" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right" data-html="true" title="Popover in Hover" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue.">
Apertura in Hover
</button>

Uso tramite Javascript

Abilita i popover tramite JavaScript:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Le opzioni possono essere passate tramite attributi data o tramite JavaScript. Per gli attributi data, aggiungi l’opzione nome a data-bs-, come in data-bs-animation="".

Per ulteriori informazioni si rimanda alla sezione popovers del sito di Bootstrap.

Metodi
Show

Mostra il popover di un elemento. Ritorna al chiamante prima che il popover sia stato effettivamente mostrato (prima che si verifichi l’evento shown.bs.popover). Questo è considerato un’attivazione “manuale” del popover. I popover senza nè titoli nè contenuto non vengono mai visualizzati.

popover.show()

hide

Nasconde il popover di un elemento. Ritorna al chiamante prima che il popover sia stato effettivamente nascosto (prima che si verifichi l’evento hidden.bs.popover). Questo è considerato un’attivazione “manuale” del popover.

popover.hide()

toggle

Attiva/disattiva il popover di un elemento. Ritorna al chiamante prima che il popover sia stato effettivamente mostrato o nascosto (prima che si verifichi l’evento shown.bs.popover o l’evento hidden.bs.popover). Questo è considerato un’attivazione “manuale” del popover.

popover.toggle()

dispose

Nasconde e distrugge il popover di un elemento.

popover.dispose()

enable

Fornisce al popover di un elemento la possibilità di essere mostrato. I popover sono abilitati in modo predefinito.

popover.enable()

disable

Rimuove la capacità di mostrare il popover di un elemento. Il popover potrà essere mostrato solo se è riattivato.

popover.disable()

toggleEnabled

Attiva/disattiva la possibilità che il popover di un elemento sia mostrato o nascosto.

popover.toggleEnabled()

update

Aggiorna la posizione del popover di un elemento.

popover.update()

Eventi
Tipo di evento Descrizione
show.bs.popover Questo evento si attiva immediatamente quando viene chiamato il metodo show.
shown.bs.popover Questo evento viene attivato quando il popover è stato reso visibile all'utente (attenderà il completamento delle transizioni CSS).
hide.bs.popover Questo evento si attiva immediatamente quando viene chiamato il metodo hide.
hidden.bs.popover Questo evento viene generato quando il popover ha finito di essere nascosto all'utente (attenderà il completamento delle transizioni CSS)..
inserted.bs.popover Questo evento si attiva dopo l'evento show.bs.popover quando il modello del popover è stato aggiunto al DOM. 
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})
Torna su