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
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Determinare lo stato di un pod in Kubernetes
Hosting di componenti WebAssembly in un'applicazione Blazor static
Utilizzare la session affinity con Azure Container Apps
Load test di ASP.NET Core con k6
Assegnare un valore di default a un parametro di una lambda in C#
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Eseguire attività con Azure Container Jobs
Inizializzare i container in Azure Container Apps
Copiare automaticamente le secret tra più repository di GitHub