TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare suggerimenti per Bootstrap 5?

1

Le descrizioni comandi sono una parte di testo marcatore che apparirà quando si passa il mouse su un collegamento ipertestuale. In Bootstrap 5, ci sono alcune cose di cui dovresti fare attenzione prima di provare ad aggiungere un tooltip. Se hai notato che il modello di partenza contiene una nuova libreria JavaScript di terze parti chiamata Popper. Viene utilizzato principalmente per il componente tooltip per il posizionamento.

Questo tutorial copre i seguenti capitoli:

  1. Nozioni di base sui suggerimenti di Bootstrap 5
  2. Descrizione comando di inizializzazione
  3. Utilizzo della descrizione comando con il tag di ancoraggio
  4. Posizionamento dei tooltip
  5. Utilizzo del tooltip con i pulsanti
  6. Aggiunta di contenuto HTML nella descrizione comandi
  7. Opzioni di personalizzazione

1 Nozioni di base sui suggerimenti di Bootstrap

  • Tooltips è un componente JavaScript, quindi dovresti includere i file bootstrap.min.js nel tuo modello HTML. In alternativa puoi anche utilizzare il file di script combinato bootstrap.bundle.min.js.
  • Inoltre, per il corretto posizionamento dei tooltip, dovresti includere popper.min.js su tutto il tuo codice sorgente.
  • I suggerimenti non verranno caricati per impostazione predefinita a causa delle prestazioni di caricamento della pagina. Quindi, deve essere inizializzato con l’elemento genitore per il caricamento sulla pagina.
  • La sequenza dei file di script dovrebbe essere popper.min.js, bootstrap.min.js e quindi lo script di inizializzazione.
  • Non ci sono immagini utilizzate nei tooltip e il concetto si basa sui tooltip in stile Facebook creati con il plugin Tipsy jQuery.
  • Il tooltip con lunghezza del titolo pari a zero non verrà mostrato.
  • Bootstrap utilizza l’animazione CSS e gli attributi dei dati per controllare il comportamento dei suggerimenti.

2 Inizializzazione delle descrizioni comandi in Bootstrap

A differenza di altri componenti Bootstrap, i tooltip devono essere inizializzati prima dell’utilizzo. È possibile aggiungere l’inizializzazione globale come di seguito o utilizzare l’inizializzazione a livello di elemento specifica se necessario.

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

Di seguito è riportato il codice per l’attivazione della descrizione comando a livello di elemento di ancoraggio.

<script> $("a").tooltip(); </script>

Di seguito è riportato il codice per l’utilizzo del pulsante per l’inizializzazione:

<script> $("button").tooltip(); </script>

Ricorda che questo codice di script deve essere aggiunto subito dopo i collegamenti popper.min.js e bootstrap.min.js affinché il suggerimento funzioni come previsto. Puoi controllare il formato del modello di partenza qui.

3 Utilizzo della descrizione comando sull’etichetta di ancoraggio

Creiamo prima un semplice tooltip usando il tag anchor. Il codice dovrebbe essere simile al seguente:

<a href="#" data-toggle="tooltip" data-animation="false" title="This is a tooltip"> Content to Show </a>
  • Dovresti usare l’attributo data-toggle con il valore come tooltip.
  • Tooltip mostrerà il testo del titolo inserito sul popup quando si passa con il mouse.
  • Il contenuto da mostrare parte è il testo di ancoraggio simile a un collegamento ipertestuale.

Il risultato dovrebbe apparire come di seguito sul browser al passaggio del mouse:

Come creare suggerimenti per Bootstrap 5?

4 Tooltip di posizionamento

Come puoi vedere nell’esempio sopra, per impostazione predefinita la descrizione comando sarà posizionata sopra il contenuto. Bootstrap ti consente di posizionare in alto, a sinistra, a destra e in fondo al testo di ancoraggio utilizzando l’attributo di posizionamento dei dati.

  • Usa data-placement="top" per la prima posizione. Questa è l’impostazione predefinita, quindi non è necessario menzionarla esplicitamente.
  • Usa data-placement = "bottom" per la posizione in basso.
  • Usa data-placement = "right" per la posizione corretta.
  • Usa data-placement = "left" per la posizione a sinistra.

5 suggerimenti sui pulsanti

Creiamo quattro tooltip con posizioni diverse sul componente pulsante.

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip on top </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> Tooltip on right </button> <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button> <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left </button>

Il risultato sul browser dovrebbe apparire come di seguito:

Come creare suggerimenti per Bootstrap 5?

6 Utilizzo del contenuto HTML all’interno del tooltip

Per impostazione predefinita, la descrizione comandi supporta solo il contenuto di testo all’interno. Puoi aggiungere tag HTML usando l’attributo data-html="true". Di seguito è riportato un esempio di aggiunta di contenuto barrato all’interno del tooltip utilizzando i tag HTML ~…~ .

<a href="#" data-toggle="tooltip" data-html="true" title="<s>This is a strikethrough tooltip</s>"> Content to Show </a>

Come puoi vedere, il contenuto all’interno del tag title viene elaborato con i tag HTML quando viene impostato l’attributo data-html="true". Di seguito è riportato come apparirà sul browser:

Come creare suggerimenti per Bootstrap 5?

7 Opzioni di personalizzazione del tooltip

È possibile personalizzare ulteriormente i suggerimenti utilizzando gli attributi "data-".

  • Disabilita l’effetto dissolvenza CSS aggiungendo l’attributo data-animation="false".
  • Ritardo mostra e nascondi con l’attributo data-delay.
  • Compensa la descrizione comando dall’elemento utilizzando data-offset.

Puoi fare riferimento ad altri esempi di suggerimenti dal sito JavaScript di Popper.

Nota: i suggerimenti di Bootstrap 5 non funzioneranno su IE8 o versioni precedenti poiché il browser non supporta il popper.


Impara Bootstrap 5 (Indice )


Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More