El Atributo POPOVERTARGETACTION

El atributo popovertargetaction es parte de la API de Popover de HTML y permite controlar acciones específicas (mostrar, ocultar o alternar) en un popover vinculado. A diferencia de popovertarget (que alterna el estado por defecto), este atributo brinda precisión para definir cómo interactúa un botón con el popover. A continuación, aprenderás a utilizarlo de manera efectiva.

1. Introducción a popovertargetaction

• Propósito: Especificar la acción que ejecutará un botón sobre un popover (show, hide o toggle).

• Relación con otros atributos:

  • Requiere popovertarget para vincular el botón al id del popover.

  • Funciona con elementos que tienen el atributo popover (auto o manual).

• Compatibilidad: Navegadores modernos como Chrome 114+, Firefox 121+, Edge 114+ y Safari 17.4+.

2. Valores del atributo

3. Sintaxis básica

<!-- Popover -->
<div id="ejemplo" popover="auto">Contenido emergente</div>

<!-- Botones con acciones -->
<button popovertarget="ejemplo" popovertargetaction="show">Abrir</button>
<button popovertarget="ejemplo" popovertargetaction="hide">Cerrar</button>
<button popovertarget="ejemplo">Alternar (default)</button>

4. Ejemplos prácticos

Ejemplo 1: Acciones básicas (show y hide)

<button popovertarget="demo1" popovertargetaction="show">Mostrar mensaje</button>
<button popovertarget="demo1" popovertargetaction="hide">Ocultar mensaje</button>

<div id="demo1" popover="auto">
  <p>¡Este es un popover automático! Se cierra al hacer clic fuera.</p>
</div>

Ejemplo 2: Popover manual con control explícito

<button popovertarget="demo2" popovertargetaction="show">Abrir panel</button>
<button popovertarget="demo2" popovertargetaction="hide">Cerrar panel</button>

<div id="demo2" popover="manual">
  <h3>Configuración</h3>
  <p>Este popover requiere cerrarse manualmente.</p>
</div>

Ejemplo 3: Menú contextual con acciones múltiples

<button popovertarget="menu" popovertargetaction="show">☰ Menú</button>

<div id="menu" popover="auto">
  <button popovertarget="menu" popovertargetaction="hide">Cerrar</button>
  <ul>
    <li><a href="#">Perfil</a></li>
    <li><a href="#">Configuración</a></li>
    <li><a href="#">Cerrar sesión</a></li>
  </ul>
</div>

5. Comportamiento según el tipo de popover

• popover="auto":

  • Con popovertargetaction="hide", el botón fuerza el cierre incluso si el popover se cerraría automáticamente.

  • Solo un popover auto puede estar abierto a la vez.

• popover="manual":

  • Permite múltiples popovers abiertos.

  • El uso de popovertargetaction="hide" es esencial para cerrarlos.

6. Estilizar botones según el estado del popover

Usa el atributo popoveropen para cambiar estilos cuando el popover está activo:

/* Botón cuando el popover está abierto */
button[popovertarget][popoveropen] {
  background-color: #4CAF50;
  color: white;
}

/* Estilo para el botón "Cerrar" */
button[popovertargetaction="hide"] {
  background-color: #f44336;
}

7. Buenas prácticas y accesibilidad

• Etiquetas claras: Usa aria-label si el botón solo tiene un icono:

  html

  Copy

  <button 
    popovertarget="menu" 
    popovertargetaction="show" 
    aria-label="Abrir menú"
  >☰</button>

   

• Run HTML

• Enfoque automático: El navegador mueve el foco al popover al abrirlo, pero verifica la navegación con teclado.

• Mensajes de feedback: Para navegadores antiguos, agrega un fallback con JavaScript:

  html

  Copy

  <script>
    if (!HTMLElement.prototype.hasOwnProperty('popover')) {
      document.querySelectorAll('[popovertarget]').forEach(btn => {
        btn.addEventListener('click', () => {
          const popover = document.getElementById(btn.getAttribute('popovertarget'));
          popover.style.display = 'block'; // Implementación básica como fallback
        });
      });
    }
  </script>

   

• Run HTML

8. Casos de uso avanzados

• Formularios multipaso: Usa popovertargetaction="show" para avanzar y hide para retroceder.

• Galerías de imágenes: Abrir una vista ampliada de una imagen con show y cerrarla con hide.

• Paneles de filtros: Mostrar opciones de filtrado en un popover manual y cerrarlo al aplicar los cambios.

9. Conclusión

El atributo popovertargetaction ofrece control granular sobre popovers en HTML, permitiendo:

• Precisión: Decide cuándo un botón debe abrir, cerrar o alternar.

• Accesibilidad: Integración nativa con gestión de foco y teclado.

• Simplicidad: Reduce la necesidad de JavaScript para casos básicos.

Recuerda:

• Combina popovertargetaction con popover="auto" o manual según el comportamiento deseado.

• Prueba en múltiples navegadores y dispositivos.

• ¡Experimenta con estilos y animaciones CSS para crear experiencias únicas!