Tooltip y popover
Dos formas de decir un poco más. Un tooltip es una pista de texto breve tomada de data-iv-tooltip, mostrada al pasar el puntero con un pequeño retardo y de inmediato al enfocar, y descrita a la tecnología asistiva mediante aria-describedby. Un popover es contenido rico construido sobre el atributo nativo popover: se abre y cierra sin JavaScript, vive en la capa superior y se cierra con clics fuera y con Escape; el componente añade la colocación junto al invocador, la gestión del foco y los eventos.
Tooltip
<div class="iv-stack" data-iv-component="tooltip">
<div class="iv-cluster">
<button class="iv-button iv-button--secondary" type="button" data-iv-tooltip="There is no room above this button, so the label flips below it">Close to the top edge</button>
</div>
<p class="iv-u-text-sm iv-u-text-muted iv-u-m-0">Sample controls: none of the buttons on this page does anything. Point at one and its label appears after a moment; move the keyboard focus to it and the label appears at once. Escape dismisses it.</p>
<div class="iv-cluster">
<button class="iv-button" type="button" data-iv-tooltip="Exports the current view as CSV">Export</button>
<button class="iv-button" type="button" data-iv-tooltip="Sends a copy to everyone listed as a reviewer of this report">Send for review</button>
<a href="#tooltip-note" data-iv-tooltip="Jumps to the note at the end of this page">Read the note</a>
</div>
<p class="iv-u-text-sm iv-u-text-muted iv-u-m-0" id="tooltip-note">The label is complementary: every control above is also readable without it, because without JavaScript there is no tooltip at all. The text lives in <code>data-iv-tooltip</code> and reaches assistive technology through <code>aria-describedby</code> while it is on screen.</p>
</div>// data-iv-component="tooltip"
{
tooltip: "There is no room above this button, so the label flips below it",
}| Opción | Atributo (en la raíz) | Por defecto | Efecto |
|---|---|---|---|
delay | data-iv-delay | 300 | Milisegundos antes de que aparezca un tooltip por puntero; el foco lo muestra al instante. |
placement | data-iv-placement | top | top o bottom; se voltea cuando no hay sitio. |
Métodos show(target), hide(), destroy(); eventos iv:show (cancelable) y después iv:shown, iv:hide y después iv:hidden. Los tooltips son pistas, nunca la única explicación: sin JavaScript no existen.
Popover
<div class="iv-stack iv-texture-mesh iv-u-p-6" style="min-block-size: 17rem; border-radius: 0.75rem">
<div class="iv-cluster">
<button class="iv-button iv-button--secondary" type="button" popovertarget="pop-share">Share this report</button>
<button class="iv-button iv-button--secondary" type="button" popovertarget="pop-plan">Plan details</button>
</div>
<p class="iv-u-text-sm iv-u-text-muted iv-u-m-0" id="popover-note">Made-up data: no report is shared and no plan is billed. Both panels are native <code>popover</code> elements, so they open without JavaScript too; with JavaScript they sit next to the button that opened them, and the focus goes into the panel and comes back on close. The mesh behind the buttons is only there to show the glass panel against something.</p>
</div>
<div class="iv-popover" id="pop-share" popover data-iv-component="popover">
<h3 class="iv-popover__title">Share this report</h3>
<p class="iv-u-text-sm">Anyone with the link would be able to read the report, but not to edit it. Nothing is shared from this page.</p>
<a href="#popover-note">Read what this panel stands for</a>
</div>
<div class="iv-popover iv-popover--arrow iv-popover--glass" id="pop-plan" popover data-iv-component="popover" data-iv-align="end">
<h3 class="iv-popover__title">Team plan</h3>
<p class="iv-u-text-sm iv-u-m-0">Invented figures: 24 seats in use of 30, renewed every March. The panel is aligned to the end of its button and carries the arrow and the glass surface.</p>
</div>// data-iv-component="popover"
{
align: "end",
}| Opción | Atributo | Por defecto | Efecto |
|---|---|---|---|
placement | data-iv-placement | bottom | bottom o top; se voltea cuando no hay sitio. |
align | data-iv-align | start | start, center o end respecto al invocador. |
offset | data-iv-offset | 8 | Separación en píxeles entre invocador y popover. |
focus | data-iv-focus | true | Mueve el foco dentro del popover al abrir y de vuelta al invocador al cerrar. |
Métodos open(), close(), toggle(), destroy(); lectura de isOpen e invoker. Eventos iv:open/iv:close (cancelables, derivados del beforetoggle nativo) y después iv:opened/iv:closed. iv-popover--arrow añade una flecha e iv-popover--glass la superficie de cristal.
Sin JavaScript
El tooltip no existe. El popover funciona mediante el atributo nativo: se abre desde su botón popovertarget, se cierra con clics fuera y con Escape, pero queda centrado en el viewport en vez de junto a su botón.
Errores frecuentes
- Poner acciones en un tooltip: no se puede pasar el puntero en pantallas táctiles y nunca es enfocable. Usa un popover.
- Menús como popovers: usa el dropdown, que tiene el patrón de teclado para elementos de menú.
- Popovers anidados: fuera de alcance.