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
Usare un KeyedService di default in ASP.NET Core 8
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Load test di ASP.NET Core con k6
Come migrare da una form non tipizzata a una form tipizzata in Angular
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Limitare le richieste lato server con l'interactive routing di Blazor 8
Disabilitare automaticamente un workflow di GitHub (parte 2)
Criptare la comunicazione con mTLS in Azure Container Apps
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Utilizzare la libreria Benchmark.NET per misurare le performance
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript