Bootstrap - Plugin Popover

Il popover è simile al tooltip, offrendo una vista estesa completa di un'intestazione. Affinché il popover si attivi, un utente deve solo posizionare il cursore sull'elemento. Il contenuto del popover può essere popolato interamente utilizzando Bootstrap Data API. Questo metodo richiede una descrizione comando.

Se desideri includere questa funzionalità di plug-in individualmente, avrai bisogno del popover.jse ha una dipendenza dal plugin tooltip . Altrimenti, come menzionato nel capitolo Panoramica sui plug-in Bootstrap , puoi includere bootstrap.js o bootstrap.min.js minimizzato .

Utilizzo

Il plug-in popover genera contenuto e markup su richiesta e per impostazione predefinita posiziona il popover dopo il loro elemento di attivazione. Puoi aggiungere popover nei seguenti due modi:

  • Via data attributes - Per aggiungere un popover, aggiungi data-toggle = "popover"a un tag di ancoraggio / pulsante. Il titolo dell'ancora sarà il testo di un popover. Per impostazione predefinita, il popover è impostato in alto dal plugin.

<a href = "#" data-toggle = "popover" title = "Example popover">
   Hover over me
</a>

  • Via JavaScript - Abilita i popover tramite JavaScript utilizzando la seguente sintassi -

$('#identifier').popover(options)

Il plug-in popover NON è solo plug-in CSS come il menu a discesa o altri plug-in discussi nei capitoli precedenti. Per usare questo plugin DEVI attivarlo usando jquery (leggi javascript). Per abilitare tutti i popover sulla tua pagina usa questo script -

$(function () { $("[data-toggle = 'popover']").popover(); });

Esempio

Il seguente esempio dimostra l'uso del plugin popover tramite attributi di dati.

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover on left">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover on top">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover on bottom">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "right" 
      data-content = "Some content in Popover on right">
      
      Popover on right
   </button>
   
</div>

<script>
   $(function (){
      $("[data-toggle = 'popover']").popover();
   });
</script>

Opzioni

Ci sono alcune opzioni che possono essere aggiunte tramite Bootstrap Data API o richiamate tramite JavaScript. La tabella seguente elenca le opzioni:

Nome opzione Tipo / valore predefinito Nome attributo dati Descrizione
animazione booleano Predefinito: vero animazione dei dati Applica una transizione di dissolvenza CSS al popover.
html booleano Predefinito: falso data-html Inserisce HTML nel popover. Se falso, verrà utilizzato il metodo di testo di jQuery per inserire il contenuto nel dominio. Usa il testo se sei preoccupato per gli attacchi XSS.
posizionamento stringa | funzione Default - top posizionamento dei dati Specifica come posizionare il popover (cioè, in alto | in basso | a sinistra | a destra | auto). Quando viene specificato auto , riorienterà dinamicamente il popover. Ad esempio, se il posizionamento è "auto sinistra", il popover verrà visualizzato a sinistra quando possibile, altrimenti verrà visualizzato a destra.
selettore stringa Default - false selettore di dati Se viene fornito un selettore, gli oggetti popover verranno delegati alle destinazioni specificate.
titolo stringa | funzione Default - " titolo-dati L'opzione title è il valore del titolo predefinito se l' attributo title non è presente.
trigger stringa Predefinito: "fuoco al passaggio del mouse" trigger di dati Definisce come viene attivato il popover - click| hover | focus | manual. Puoi passare più trigger; separali con uno spazio.
ritardo numero | oggetto Default - 0 ritardo dei dati

Ritardi che mostrano e nascondono il popover in ms - non si applica al tipo di trigger manuale. Se viene fornito un numero, il ritardo viene applicato a entrambi nascondi / mostra. La struttura dell'oggetto è -

delay: { show: 500, hide: 100 }
contenitore stringa | false Predefinito: false contenitore di dati Aggiunge il popover a un elemento specifico. Esempio: container: "body"

Metodi

Di seguito sono riportati alcuni metodi utili per il popover:

Metodo Descrizione Esempio

Options - .popover (opzioni)

 Allega un gestore popover a una raccolta di elementi. 
$().popover(options)

Toggle - .popover ('toggle')

 Attiva o disattiva il popover di un elemento. 
$('#element').popover('toggle')

Show - .popover ('mostra')

 Rivela il popover di un elemento. 
$('#element').popover('show')

Hide - .popover ('nascondi')

 Nasconde il popover di un elemento. 
$('#element').popover('hide')

Destroy - .popover ('distruggi')

 Nasconde e distrugge il popover di un elemento. 
$('#element').popover('destroy')

Esempio

L'esempio seguente mostra i metodi del plugin popover:

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default popover-show" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary popover-hide" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-hide method">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success popover-destroy" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover-destroy method">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning popover-toggle" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-toggle method">
      
      Popover on right
   </button>
	
   <br><br><br><br><br><br>
   
   <p class = "popover-options">
      <a href = "#" type = "button" class = "btn btn-warning" 
         title = "<h2>Title</h2>" data-container = "body" 
         data-toggle = "popover" data-content = "
         <h4>Some content in Popover-options method</h4>">
         
         Popover
      </a>
   </p>
   
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
      $(function () { $(".popover-options a").popover({html : true });});
   </script>
	
</div>

Eventi

La tabella seguente elenca gli eventi su cui lavorare con il plugin popover. Questo evento può essere utilizzato per agganciarsi alla funzione.

Evento Descrizione Esempio
show.bs.popover Questo evento si attiva immediatamente quando viene chiamato il metodo dell'istanza show. 
$('#mypopover').on('show.bs.popover', function () {
   // do something
})
mostrato.bs.popover Questo evento viene generato quando il popover è stato reso visibile all'utente (attenderà il completamento delle transizioni CSS). 
$('#mypopover').on('shown.bs.popover', function () {
   // do something
})
hide.bs.popover Questo evento viene generato immediatamente quando è stato chiamato il metodo di istanza hide. 
$('#mypopover').on('hide.bs.popover', function () {
   // do something
})
nascosto.bs.popover Questo evento viene generato quando il popover ha terminato di essere nascosto all'utente (attenderà il completamento delle transizioni CSS). 
$('#mypopover').on('hidden.bs.popover', function () {
   // do something
})

Esempio

L'esempio seguente mostra gli eventi del plug-in Popover:

<div clas = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-primary popover-show" 
      title = "Popover title" data-container = "body" data-toggle = "popover" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
</div>

<script>
   $(function () { $('.popover-show').popover('show');});
   
   $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("Alert message on show");
   })});
</script>