Quando dobbiamo mostrare un messaggio di aiuto all'utente, il tooltip di default offerto dal browser è comodo, ma non è di certo la soluzione più elegante. Negli anni sono stati creati diversi plugin per creare tooltip più o meno eleganti, ma al momento Bootstrap ne offre uno dei più semplici e visualmente gradevoli da utilizzare.
Il primo passo per utilizzare il plugin di Bootstrap è creare un oggetto HTML al quale attaccare il tooltip. All'oggetto dobbiamo aggiungere i seguenti tre attributi:
- data-toggle: da impostare su "tooltip";
- data-placement: da impostare su top-bottom-left-right per specificare dove far apparire il tooltip rispetto all'oggetto;
- title: da impostare con il testo del tooltip.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip in alto">Salva</button>
Una volta creato il codice HTML, dobbiamo istanziare il plugin nel seguente modo.
$('.btn').tooltip(options);
L'oggetto options può contenere diverse proprietà che sono specificate nella documentazione raggiungibile qui: http://getbootstrap.com/javascript/#tooltips.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Evitare la script injection nelle GitHub Actions
Utilizzare le collection expression in C#
Hosting di componenti WebAssembly in un'applicazione Blazor static
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Utilizzare Tailwind CSS all'interno di React: installazione
Creare gruppi di client per Event Grid MQTT
Evitare la command injection in un workflow di GitHub
Evitare il flickering dei componenti nel prerender di Blazor 8
Reactive form tipizzati con FormBuilder in Angular
Implementare il throttling in ASP.NET Core
Creare moduli CSS in React