Popovers en HTML

Dos atributos y el navegador maneja el cierre al clic afuera, la capa superior y el foco.

<button type="button" popovertarget="account-menu">
  Account
</button>

<div id="account-menu" popover>
  <ul>
    <li><a href="/profile">Profile</a></li>
    <li><a href="/settings">Settings</a></li>
  </ul>
  <button type="button" popovertarget="account-menu"
          popovertargetaction="hide">Close</button>
</div>

<div id="tips" popover="manual">
  <p>Press tab to move between fields.</p>
</div>

Cómo funciona

1. popover en el panel; popovertarget en el botón que lo abre.
2. Hacer clic afuera o presionar Escape cierra un popover auto.
3. popovertargetaction puede forzarlo a solo mostrar o solo ocultar.

El intento, en números

Líneas

16

Caracteres a escribir

377

Tokens

106

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 85 segundos.

Escribe este fragmento

Paso 4 de 4 en Desplegables y diálogos; paso 4 de 13 en HTML interactivo.

← Anterior Siguiente →