Aggiungere tooltip ad una pagina può migliorare l'usabilita della stessa. Sebbene i browser mettano a disposizione un tooltip di default, questo può essere personalizzato nel contenuto ma non nell'aspetto grafico. Bootstrap permette di creare dei tooltip custom che possono anche essere personalizzati nell'aspetto grafico tramite CSS.
Nel codice che segue vediamo come creare un tooltip nel codice HTML.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip">Tooltip</button>
La chiave di questo codice HTML sono gli attributi data-placement, che specifica la posizione del tooltip rispetto all'oggetto (left-right-top-bottom), e data-toggle che torna utile quando dobbiamo inizializzare il tooltip. Infatti, non basta il codice HTML a mostrare il tooltip, ma dobbiamo inizializzarlo a mano tramite Javascript. Per inizializzare tutti i tooltip di una pagina ossiamo scrivere il seguente codice.
$(function () { $('[data-toggle="tooltip"]').tooltip() })
Questo script viene lanciato al caricamento della pagina, e recupera tutti i tag HTML che hanno l'attributo data-toggle impostato a "tooltip" e gli associa il plugin tooltip di Bootstrap.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Utilizzare i primary constructor in C#
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Configurare policy CORS in Azure Container Apps
Utilizzare Tailwind CSS all'interno di React: installazione
Disabilitare automaticamente un workflow di GitHub
Effettuare il pull di git LFS in un workflow di GitHub
Workflow di continuous deployment tramite pull request label in GitHub
Hosting di componenti WebAssembly in un'applicazione Blazor static
Creare un'applicazione React e configurare Tailwind CSS