Nello script #123 abbiamo visto come sfruttare Bootstrap per mostrare un tooltip. In questo script espandiamo l'idea parlando di come mostrare un vero e proprio popup accanto a un elemento. Bootstrap rende facile questo compito treamite il controllo popover. Questo controllo ci permette di definire il contenuto del popup direttamente dal codice HTML come nel seguente esempio.
<button type="button" class="btn btn-default" data-toggle="popover" title="Popup title" data-content="Popup content"> Toggle popover </button>
L'attributo title definisce il titolo del popup. Se questo non è presente, il titolo non viene mostrato. L'attributo data-content definisce invece il contenuto del popover.
Il codice HTML definisce il contenuto del popup, ma da solo non basta in quanto dobbiamo inizializzare il popup singolarmente per tutti i controlli. Possiamo eseguire questa operazione tramite il seguente codice
$(function () { $('[data-toggle="popover"]').popover(); })
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Aggiungere interattività lato server in Blazor 8
Gestione degli stili CSS con le regole @layer
Eseguire attività pianificate con Azure Container Jobs
Ottimizzazione dei block template in Angular 17
Creare una custom property in GitHub
Cambiare la chiave di partizionamento di Azure Cosmos DB
Definire stili a livello di libreria in Angular
Le novità di Angular: i miglioramenti alla CLI
Come migrare da una form non tipizzata a una form tipizzata in Angular
Aprire una finestra di dialogo per selezionare una directory in WPF e .NET 8
Utilizzare un service principal per accedere a Azure Container Registry