Bootstrap - suggerimenti: una guida per principianti

Ciao a tutti, futuri sviluppatori web! Oggi esploreremo il meraviglioso mondo dei suggerimenti di Bootstrap. Come il tuo amico insegnante di informatica del quartiere, sono qui per guidarti in questo viaggio passo per passo. Non preoccuparti se non hai mai scritto una riga di codice prima - inizieremo dal principio e procederemo gradualmente. Allora, prenditi una tazza di caffè (o la tua bevanda preferita) e iniziamo!

Cos'è un suggerimento?

Prima di immergerci nei dettagli, capiremo cos'è un suggerimento. Hai mai mossi il mouse su un'icona o del testo su un sito web e visto una piccola finestra a comparsa con informazioni aggiuntive?那就是一个提示！它们就像小助手，在不干扰主要内容的情况下提供额外的上下文 o spiegazioni.

Abilitare i suggerimenti

Ora, mettiamo le mani sporche con un po' di codice. La prima cosa che dobbiamo fare è abilitare i suggerimenti in Bootstrap. Non preoccuparti; è più facile di quanto sembri!

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

Questo piccolo script dice a Bootstrap: "Ehi, vogliamo usare i suggerimenti in questa pagina!" È come accendere l'interruttore della luce prima di poter vedere in una stanza buia.

Creare un suggerimento

Creiamo il nostro primo suggerimento. È semplice come aggiungere pochi attributi a un elemento HTML:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Sono un suggerimento!">
Passa sopra di me
</button>

Ecco cosa sta succedendo:

• Stiamo creando un pulsante utilizzando le classi btn e btn-secondary di Bootstrap.
• data-toggle="tooltip" dice a Bootstrap che questo elemento dovrebbe avere un suggerimento.
• title="Sono un suggerimento!" è il testo che apparirà nel nostro suggerimento.

Quando passi il mouse sopra questo pulsante, vedrai "Sono un suggerimento!" apparire. Magia, vero?

Suggerimenti sui link

I suggerimenti non sono solo per i pulsanti. Aggiungiamone uno a un link:

<a href="#" data-toggle="tooltip" title="Clicca qui per andare da qualche parte!">Passa sopra questo link</a>

Funziona allo stesso modo del nostro esempio di pulsante. Quando passi il mouse sul link, vedrai il messaggio del suggerimento.

Suggerimenti personalizzati

Ora, diventiamo un po' più creativi. Possiamo personalizzare i nostri suggerimenti per renderli più interessanti:

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true"
title="<em>Suggerimento</em> <u>con</u> <b>HTML</b>">
Passa per un suggerimento HTML
</button>

In questo esempio, abbiamo aggiunto data-html="true" per permettere l'uso di HTML nel nostro suggerimento. Ora possiamo utilizzare tag come <em>, <u>, e <b> per stilizzare il testo del nostro suggerimento.

Posizionamento del suggerimento

Possiamo controllare dove apparirà il nostro suggerimento rispetto al nostro elemento. Proviamo tutte e quattro le posizioni:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Suggerimento in alto">
Suggerimento in alto
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Suggerimento a destra">
Suggerimento a destra
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Suggerimento in basso">
Suggerimento in basso
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Suggerimento a sinistra">
Suggerimento a sinistra
</button>

L'attributo data-placement dice a Bootstrap dove posizionare il suggerimento. È come dire al tuo amico dove posizionarsi per una foto!

Suggerimento con HTML personalizzato

Ricordi quando abbiamo abilitato l'HTML nei nostri suggerimenti prima? Portiamo isso un passo avanti:

<button type="button" class="btn btn-danger" data-toggle="tooltip" data-html="true"
title="<h3>Intestazione personalizzata</h3><p>Questo è un paragrafo.</p><img src='smiley.gif' alt='Faccia sorridente'>">
Passa per una sorpresa!
</button>

Questo suggerimento include un'intestazione, un paragrafo e persino un'immagine! È come una piccola pagina web dentro il nostro suggerimento.

Markup

A volte, potresti voler avere più controllo sulla struttura del tuo suggerimento. È qui che entra in gioco il markup personalizzato:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-template='<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' title="Suggerimento personalizzato">
Markup personalizzato del suggerimento
</button>

Questo esempio utilizza l'attributo data-template per definire una struttura personalizzata per il nostro suggerimento. È come costruire una casa invece di comprarne una pré-fabbricata!

Suggerimento su elementi disabilitati

Di solito, gli elementi disabilitati non attivano le interazioni utente. Ma con un piccolo trucco, possiamo far funzionare i suggerimenti su di loro:

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Suggerimento disabilitato">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Button disabilitato</button>
</span>

Stiamo avvolgendo il nostro pulsante disabilitato in uno span che può ricevere il focus. È come dare una mano a qualcuno che non può raggiungere lo scaffale più alto!

Opzioni

Infine, esaminiamo alcune opzioni che possiamo utilizzare per personalizzare ulteriormente i nostri suggerimenti:

Opzione	Tipo	Predefinito	Descrizione
animation	boolean	true	Applica una transizione CSS di dissolvenza al suggerimento
container	string | false	false	Aggiunge il suggerimento a un elemento specifico
delay	number | object	0	Ritardo nella visualizzazione e nell'occultamento del suggerimento (ms)
html	boolean	false	Permette l'uso di HTML nel suggerimento
placement	string | function	'top'	Come posizionare il suggerimento
selector	string	false	Se viene fornito un selettore, gli oggetti del suggerimento saranno delegati ai target specificati
template	string	<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>	HTML di base da utilizzare quando si crea il suggerimento
title	string | element | function	''	Valore predefinito del titolo se l'attributo title non è presente
trigger	string	'hover focus'	Come viene attivato il suggerimento - click | hover | focus | manual

Puoi utilizzare queste opzioni quando inizializzi i tuoi suggerimenti:

$('#example').tooltip({
animation: false,
delay: { "show": 500, "hide": 100 },
placement: 'right'
});

Questo codice disabilta l'animazione di dissolvenza, aggiunge un ritardo e posiziona il suggerimento sul lato destro dell'elemento.

Ecco fatto! Hai appena fatto i tuoi primi passi nel mondo dei suggerimenti di Bootstrap. Ricorda, la chiave per padroneggiare questo (e qualsiasi concetto di programmazione) è la pratica. Prova a creare una pagina web e aggiungi diversi tipi di suggerimenti. Esperimenta con le opzioni e vedi cosa riesci a creare.

Prima di sapere, sarai il maestro dei suggerimenti e le tue pagine web saranno informative e interattive! Buon codice e non dimenticare di divertirti lungo il percorso!

Credits: Image by storyset