Popover

Il popover è una finestra pop-up che viene visualizzata al click dell'utente su un determinato elemento, al fine di fornire contenuti utili ed aggiuntivi.
A differenza del tooltip, i popover si possono visualizzare sia lato desktop che mobile, al click o al touch.
Qui potrai reperire la User Interface, lo snippet e le modalità di utilizzo per i popover dell’Ecosistema digitale Turismo Cultura.


Popover in basso
Visualizza popover in basso
Popover in alto
Visualizza popover in alto
Popover a sinistra
Visualizza popover a sinistra
Popover a destra
Visualizza popover a destra 


                                            
<!-- Popover in basso --> 
<a href="javascrip:void(0)" class="example btn dms-btn dms-btn--primary"
    data-toggle="popover" title="Titolo popover" data-placement="bottom"
    data-content="Quos, quae aliquam suspendisse eros interdum aptent cursus. Cumque penatibus wisi.">Popover
    in basso</a>

<!-- Popover in alto --> 
<a href="javascrip:void(0)" class="example btn dms-btn dms-btn--primary"
    data-toggle="popover" title="Titolo popover" data-placement="top"
    data-content="Quos, quae aliquam suspendisse eros interdum aptent cursus. Cumque penatibus wisi.">Popover
    in alto</a>

<!-- Popover a sinistra --> 
<a href="javascrip:void(0)" class="example btn dms-btn dms-btn--primary"
    data-toggle="popover" title="Titolo popover" data-placement="left"
    data-content="Quos, quae aliquam suspendisse eros interdum aptent cursus. Cumque penatibus wisi.">Popover
    a sinistra</a>

<!-- Popover a destra --> 
<a href="javascrip:void(0)" class="example btn dms-btn dms-btn--primary"
    data-toggle="popover" title="Titolo popover" data-placement="right"
    data-content="Quos, quae aliquam suspendisse eros interdum aptent cursus. Cumque penatibus wisi.">Popover
    a destra</a>

Utilizzo

E' obbligatorio:

  • aggiungere lato html l'attributo data-toggle="popover"
  • inizializzare il componente. Questo può avvenire tramite il seguente esempio lato javascript (già inserito all'interno del progetto):
    $('[data-toggle="popover"]').popover()
  • aggiungere l'attributo data-placement con uno dei valori tra "top", "bottom", "left" e "right" per gestirne il posizionamento (vedi snippet)
  • valorizzare l'attributo data-content e title per visualizzarlo, rispettivamente per aggiungere il contenuto e il titolo di un popover

Cose da sapere:

  • i popover funzionano sia con la tastiera che per gli utenti dotati di tecnologia assistiva
  • in caso di data-content e title con valori vuoti i popopover non verranno mai mostrati
  • specifica container: "body" per evitare problemi di rendering in componenti più complessi (come nei gruppi di input, gruppi di bottoni, etc)
  • quando 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
  • attivare i popover su elementi nascosti non funzionerà
  • i popover per gli elementi .disabled o disabled devono essere attivati da un elemento contenitore
  • I popover devono essere nascosti prima che i loro elementi corrispondenti siano stati rimossi dal DOM

Per ulteriori informazioni visita la pagina Popovers di Bootstrap.