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
Aggiungere interattività lato server in Blazor 8
Effettuare il binding di date in Blazor
Paginare i risultati con QuickGrid in Blazor
Miglioramenti nelle performance di Angular 16
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Usare una container image come runner di GitHub Actions
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Eseguire le GitHub Actions offline
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Creare moduli CSS in React
I più letti di oggi
- I lego? Programmabili con .NET!
- Disponibile anche il runtime di ASP.NET 2.0
- Azure Mobile Services: costruire il back-end per le app
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Release candidate per Expression Blend
- #sqlserver 2008 r2 CTP: report builder 3.0 e #businessintelligence http://u.aspitalia.com/g
- #wcfRIAservices è pronto: http://u.aspitalia.com/d4. se vuoi un'introduzione, la nostra è su http://u.aspitalia.com/d3
- segui live #futuredecoded da Roma dalle 9:30 su http://www.communitydays.it