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
Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
Creare una libreria CSS universale: Cards
Effettuare il refresh dei dati di una QuickGrid di Blazor
Simulare Azure Cosmos DB in locale con Docker
Combinare Container Queries e Media Queries
Utilizzare una qualunque lista per i parametri di tipo params in C#
Configurare lo startup di applicazioni server e client con .NET Aspire
Utilizzare Hybrid Cache in .NET 9
Gestione degli eventi nei Web component HTML
Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
Utilizzare Azure Cosmos DB con i vettori
Creare agenti facilmente con Azure AI Agent Service