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
Gestire undefined e partial nelle reactive forms di Angular
Sfruttare lo streaming di una chiamata Http da Blazor
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Utilizzare Model as a Service su Microsoft Azure
Eseguire attività pianificate con Azure Container Jobs
Elencare le container images installate in un cluster di Kubernetes
Aggiungere interattività lato server in Blazor 8
Disabilitare automaticamente un workflow di GitHub (parte 2)
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Miglioramenti nell'accessibilità con Angular CDK
I più letti di oggi
- I nuovi metodi degli array di ECMAScript 5
- Evitare (o ridurre) il repo-jacking sulle GitHub Actions
- Un custom control BoundField con dropdownlist
- .NET Core 3, C#8 and beyond
- Utilizzare long polling in HTML5 per richieste in real time
- Utilizzare le shortcut da tastiera con KeyboardAccelerator nella Universal Windows Platform
- Microsoft Security Bulletin MS05-048