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
Installare le Web App site extension tramite una pipeline di Azure DevOps
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Utilizzare politiche di resiliency con Azure Container App
Definire stili a livello di libreria in Angular
Gestione degli environment per il deploy con un workflow di GitHub
Eseguire una GroupBy per entity in Entity Framework
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Usare il versioning con i controller di ASP.NET Core Web API
Creare moduli CSS in React
Utilizzare Tailwind CSS all'interno di React: installazione