Bootstrap - Plug-in Tooltip

I suggerimenti sono utili quando è necessario descrivere un collegamento. Il plugin è stato ispirato dal plugin jQuery.tipsy scritto da Jason Frame . Da allora i tooltip sono stati aggiornati per funzionare senza immagini, animati con un'animazione CSS e attributi di dati per l'archiviazione locale dei titoli.

Se desideri includere questa funzionalità di plugin individualmente, allora avrai bisogno di tooltip.js. Altrimenti, come menzionato nel capitolo Panoramica sui plug-in Bootstrap , puoi includere bootstrap.js o bootstrap.min.js minimizzato .

Utilizzo

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

  • Via data attributes - Per aggiungere una descrizione comando, aggiungi data-toggle = "tooltip"a un tag di ancoraggio. Il titolo dell'ancora sarà il testo di un suggerimento. Per impostazione predefinita, il suggerimento è impostato in alto dal plug-in.

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

  • Via JavaScript - Attiva la descrizione comando tramite JavaScript -

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

Il plug-in Tooltip 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 suggerimenti sulla tua pagina usa questo script -

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

Esempio

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

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   title = "Tooltip on left"> Default Tooltip</a>.

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "top" 
   title = "Tooltip on top">Tooltip on Top</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
   title = "Tooltip on bottom">Tooltip on Bottom</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "right" 
   title = "Tooltip on right">Tooltip on Right</a>
	
<br>

<h4>Tooltip examples for buttons</h4>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
   Default Tooltip
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">
	
   Tooltip on left
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "top" title = "Tooltip on top">
   
   Tooltip on top
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "bottom" title = "Tooltip on bottom">
   
   Tooltip on bottom
</button>

<button type = " button" class = " btn btn-default" data-toggle = "tooltip" 
   data-placement = "right" title = "Tooltip on right">
   
   Tooltip on right
</button>

<script>
   $(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</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 tooltip.
html booleano Predefinito: false data-html Inserisce HTML nella descrizione comando. 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 Predefinito: top posizionamento dei dati

Specifica come posizionare la descrizione comando (ad esempio, in alto | in basso | a sinistra | a destra | auto).

Quando viene specificato auto , riorienterà dinamicamente il tooltip. Ad esempio, se il posizionamento è "sinistra automatica", il suggerimento verrà visualizzato a sinistra quando possibile, altrimenti verrà visualizzato a destra.
selettore stringa Predefinito: false selettore di dati Se viene fornito un selettore, gli oggetti della descrizione comando 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 Default: "hover focus" trigger di dati Definisce come viene attivato il tooltip: click| hover | focus | manual. Puoi passare più trigger; separali con uno spazio.
soddisfare stringa | funzione Default: '' contenuto dei dati Valore del contenuto predefinito se l' attributo del contenuto dei dati non è presente
ritardo numero | oggetto Default: 0 ritardo dei dati

Ritardi che mostrano e nascondono la descrizione comando in ms - non si applica al tipo di attivazione 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 la descrizione comando a un elemento specifico. Esempio: container: "body"

Metodi

Di seguito sono riportati alcuni metodi utili per i suggerimenti:

Metodo Descrizione Esempio

Options - .tooltip (opzioni)

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

Toggle - .tooltip ('toggle')

 Attiva o disattiva la descrizione comando di un elemento. 
$('#element').tooltip('toggle')

Show - .tooltip ('mostra')

 Rivela la descrizione comando di un elemento. 
$('#element').tooltip('show')

Hide - .tooltip ('nascondi')

 Nasconde la descrizione comando di un elemento. 
$('#element').tooltip('hide')

Destroy - .tooltip ('distruggi')

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

Esempio

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

<div style = "padding: 100px 100px 10px;">
   This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
      title = "show">Tooltip on method show</a>.

   This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip" 
      data-placement = "left" title = "hide">Tooltip on method hide</a>.

   This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip" 
      data-placement = "top" title = "destroy">Tooltip on method destroy</a>.

   This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip" 
      data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
   
   <br><br><br><br><br><br>
   
   <p class = "tooltip-options" >
      This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
         </h2>">Tooltip on method options</a>.
   </p>

   <script>
      $(function () { $('.tooltip-show').tooltip('show');});
      $(function () { $('.tooltip-hide').tooltip('hide');});
      $(function () { $('.tooltip-destroy').tooltip('destroy');});
      $(function () { $('.tooltip-toggle').tooltip('toggle');});
      $(function () { $(".tooltip-options a").tooltip({html : true });});
   </script>
</div>

Eventi

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

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

Esempio

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

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
   title = "Default Tooltip">Default Tooltip</a>.

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