Componente

Popover

Un riquadro con titolo e contenuto che si apre al clic accanto al suo pulsante: popover API nativa più l'ancoraggio CSS che daisyUI dropdown già usa.

Riferimento: <it-popover>
Classi: ita-popoverita-popover-headerita-popover-bodyita-popover-close
Basato su (daisyUI): dropdowndropdown-topdropdown-bottomdropdown-leftdropdown-rightdropdown-centerbtn
Solo CSS: popovertarget apre e chiude, Esc e il clic fuori chiudono (light dismiss), il focus torna al pulsante: nessuno script. Il posizionamento usa anchor-name/position-anchor. I browser senza ancoraggio CSS mostrano il riquadro al centro della finestra. L'apertura al passaggio del mouse (interestfor) è ancora sperimentale e non è inclusa: per un testo breve al passaggio del mouse usa Tooltip.
Storybook: Apri le storie di Popover

Esempio base

Mostra il codice HTML

<div class="flex flex-wrap items-center justify-center gap-4 py-24">
<button type="button" class="ita-btn ita-btn-primary gap-2" popovertarget="popover-1" style="anchor-name:--popover-1"><span>Apri popover</span></button>
<div id="popover-1" popover role="dialog" class="dropdown dropdown-bottom dropdown-center ita-popover" style="position-anchor:--popover-1" aria-labelledby="popover-1-title">
  <div class="ita-popover-header">
    <p id="popover-1-title">Titolo del popover</p>
  </div>
  <div class="ita-popover-body"><p>Il contenuto del popover: testo breve, eventualmente con un <a href="#" class="ita-link font-semibold">link</a>.</p></div>
</div>
</div>

Posizionamento

Mostra il codice HTML

<div class="flex flex-wrap items-center justify-center gap-4 py-40">
<button type="button" class="ita-btn ita-btn-primary gap-2" popovertarget="popover-2" style="anchor-name:--popover-2"><span>In alto</span></button>
<div id="popover-2" popover role="dialog" class="dropdown dropdown-top dropdown-center ita-popover" style="position-anchor:--popover-2" aria-labelledby="popover-2-title">
  <div class="ita-popover-header">
    <p id="popover-2-title">Popover in alto</p>
  </div>
  <div class="ita-popover-body"><p>Il contenuto del popover: testo breve, eventualmente con un <a href="#" class="ita-link font-semibold">link</a>.</p></div>
</div>
<button type="button" class="ita-btn ita-btn-primary gap-2" popovertarget="popover-3" style="anchor-name:--popover-3"><span>In basso</span></button>
<div id="popover-3" popover role="dialog" class="dropdown dropdown-bottom dropdown-center ita-popover" style="position-anchor:--popover-3" aria-labelledby="popover-3-title">
  <div class="ita-popover-header">
    <p id="popover-3-title">Popover in basso</p>
  </div>
  <div class="ita-popover-body"><p>Il contenuto del popover: testo breve, eventualmente con un <a href="#" class="ita-link font-semibold">link</a>.</p></div>
</div>
<button type="button" class="ita-btn ita-btn-primary gap-2" popovertarget="popover-4" style="anchor-name:--popover-4"><span>A sinistra</span></button>
<div id="popover-4" popover role="dialog" class="dropdown dropdown-left dropdown-center ita-popover" style="position-anchor:--popover-4" aria-labelledby="popover-4-title">
  <div class="ita-popover-header">
    <p id="popover-4-title">Popover a sinistra</p>
  </div>
  <div class="ita-popover-body"><p>Il contenuto del popover: testo breve, eventualmente con un <a href="#" class="ita-link font-semibold">link</a>.</p></div>
</div>
<button type="button" class="ita-btn ita-btn-primary gap-2" popovertarget="popover-5" style="anchor-name:--popover-5"><span>A destra</span></button>
<div id="popover-5" popover role="dialog" class="dropdown dropdown-right dropdown-center ita-popover" style="position-anchor:--popover-5" aria-labelledby="popover-5-title">
  <div class="ita-popover-header">
    <p id="popover-5-title">Popover a destra</p>
  </div>
  <div class="ita-popover-body"><p>Il contenuto del popover: testo breve, eventualmente con un <a href="#" class="ita-link font-semibold">link</a>.</p></div>
</div>
</div>

Con pulsante di chiusura

Mostra il codice HTML

<div class="flex flex-wrap items-center justify-center gap-4 py-24">
<button type="button" class="ita-btn ita-btn-secondary gap-2" popovertarget="popover-6" style="anchor-name:--popover-6"><span>Assistenza</span></button>
<div id="popover-6" popover role="dialog" class="dropdown dropdown-bottom dropdown-center ita-popover" style="position-anchor:--popover-6" aria-labelledby="popover-6-title">
  <div class="ita-popover-header">
    <p id="popover-6-title">Hai bisogno di aiuto?</p><button type="button" class="ita-popover-close" popovertarget="popover-6" popovertargetaction="hide" aria-label="Chiudi"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l3.7,3.6l-0.8,0.8L12,12.7l-3.6,3.7l-0.8-0.8l3.7-3.6L7.6,8.4l0.8-0.8l3.6,3.7l3.6-3.7l0.8,0.8L12.7,12z" /></svg></button>
  </div>
  <div class="ita-popover-body"><p class="mb-2">Chiama il numero verde 800 123 456 dal lunedì al venerdì, 9–17.</p><a href="#" class="ita-link font-semibold">Scrivi all'assistenza</a></div>
</div>
</div>

Su un pulsante icona

Il popover spiega un campo senza occupare spazio nel modulo.

Codice IUV

Mostra il codice HTML

<div class="flex flex-wrap items-center justify-center gap-4 justify-start py-16">
<span class="font-semibold">Codice IUV</span>
<button popovertarget="popover-7" style="anchor-name:--popover-7" type="button" class="ita-btn ita-btn-ghost ita-btn-xs ita-btn-circle text-primary" aria-label="Informazioni sul codice IUV"><svg class="size-6 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,21c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S17,21,12,21L12,21z M10.8,16.5H12v1.8h-1.2V16.5z M15.3,8.5c0,0.6-0.1,1.2-0.3,1.8c-0.3,0.5-0.8,1-1.3,1.4L12.3,13c-0.2,0.4-0.4,0.8-0.4,1.2v0.6H11 c-0.1-0.3-0.2-0.7-0.2-1c0-0.4,0.2-0.9,0.5-1.2c0.4-0.5,0.9-1,1.4-1.4c0.5-0.4,0.9-0.8,1.2-1.3c0.2-0.4,0.3-0.9,0.3-1.4 c0-0.5-0.2-1.1-0.6-1.4c-0.6-0.3-1.3-0.5-2-0.4L9.3,7H8.8V6.2c1-0.3,2-0.5,3-0.5c0.9-0.1,1.9,0.1,2.7,0.6 C15.1,6.9,15.4,7.7,15.3,8.5z" /></svg></button>
<div id="popover-7" popover role="dialog" class="dropdown dropdown-right dropdown-center ita-popover" style="position-anchor:--popover-7" aria-labelledby="popover-7-title">
  <div class="ita-popover-header">
    <p id="popover-7-title">Che cos'è il codice IUV</p>
  </div>
  <div class="ita-popover-body"><p>L'Identificativo Univoco di Versamento è il codice di 18 cifre stampato sull'avviso di pagamento pagoPA.</p></div>
</div>
</div>