30/Overlays

Tooltip y popover

Tooltip de texto con hover y foco, y popover con contenido interactivo que se abre con clic.

Tooltip

Con data-cb-tooltip-placement eliges el lado; si no cabe, se voltea solo.

HTML

<button class="cb-btn cb-btn--outline" type="button" data-cb-tooltip="Guarda los cambios (⌘S)">Arriba</button>
<button class="cb-btn cb-btn--outline" type="button" data-cb-tooltip="Aparece abajo" data-cb-tooltip-placement="bottom">Abajo</button>
<button class="cb-btn cb-btn--outline" type="button" data-cb-tooltip="A la derecha" data-cb-tooltip-placement="right">Derecha</button>
<button class="cb-icon-btn" type="button" aria-label="Información" data-cb-tooltip="El NIT debe incluir el guion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg></button>

Popover

HTML

<div class="cb-popover self-start" data-cb-popover>
  <button class="cb-btn cb-btn--outline" type="button">Compartir</button>
  <div class="cb-popover__panel" aria-label="Compartir enlace">
    <p class="cb-popover__title">Compartir enlace</p>
    <p class="mb-3">Cualquiera con el enlace podrá verlo.</p>
    <div class="cb-input-group"><input class="cb-input cb-input--sm" value="https://ejemplo.com/p/42" aria-label="Enlace" readonly><button class="cb-btn cb-btn--primary cb-btn--sm" type="button" data-cb-copy="https://ejemplo.com/p/42"><span data-cb-copy-label>Copiar</span></button></div>
  </div>
</div>

Clases y modificadores

Clase	Descripción
`.cb-tooltip`	Globo de texto que el JS crea en el `body`.
`.cb-popover`, `.cb-popover__panel`	Contenedor y panel. `--end` alinea a la derecha.
`.cb-popover__title`	Título del panel.

Atributos data-cb-*

Atributo	Descripción
`data-cb-tooltip="texto"`	Texto del tooltip.
`data-cb-tooltip-placement="top\|bottom\|left\|right"`	Lado preferido.
`data-cb-popover`	Activa el popover.
`data-cb-popover-trigger`	Botón que abre (por defecto, el primer `button`).

JavaScript

Evento	Cuándo se dispara
`cb:open` / `cb:close`	En el popover al abrir o cerrar.

Accesibilidad

El tooltip se enlaza con aria-describedby mientras está visible y se cierra con Esc (WCAG 1.4.13).
No pongas información esencial solo en un tooltip: no se ve en pantallas táctiles.
El panel del popover tiene role="dialog" y el botón aria-expanded.