Los que hemos trabajado en el desarrollo web desde sus principios hemos vivido lo complejo que era gestionar una ventana emergente en una web. En este artículo vamos a ver lo sencillo que es crear mensajes emergentes con popover en HTML5 siguiendo un estándar.
Un poco de historia de los mensajes emergentes.
Y es que antes de que se estandarizase, y pudiésemos crear código en HTML5 para poder crear mensajes emergentes, hemos pasado por muchas épocas y alternativas diferentes.
En primer lugar teníamos las ventanas emergentes o pop-ups que se abrían mediante JavaScript. Y se podían mandar mensajes mediante funciones como alert() o prompt(). Incluso se lanzaban ventanas emergentes que se ponían en primer plano y que acababan bloqueando la ventana padre. Estas ventanas eran muy intrusivas, no cumplían ningún estándar de accesibilidad y acabaron siendo bloqueadas por los navegadores.
Después llegaron las librerías JavaScript, como el caso de desarrollos en jQuery, que nos permitían crear ventanas modales, popovers o lightboxes de una forma más elegante, pero seguían siendo soluciones propietarias que no seguían ningún estándar.
Finalmente, con HTML5 se ha introducido el atributo popover que nos permite crear mensajes emergentes de una forma nativa y estandarizada. Esta nueva característica nos ofrece una solución integrada directamente en el lenguaje HTML, sin necesidad de depender de librerías externas. Lo que nos facilita enormemente la creación de mensajes emergentes con popover en HTML5.
Además ha introducido otros elementos en HTML5 como dialog que también nos permiten crear ventanas emergentes de diálogo.
Casos de uso del elemento popover en HTML5
Antes de crear mensajes emergentes con popover en HTML5 vamos a ver qué casos de uso tenemos para poder aplicar esta solución. Los casos de uso más comunes para utilizar el elemento popover en HTML5 son múltiples y variados, permitiendo mejorar significativamente la experiencia del usuario en diferentes situaciones de interacción con la página web.
- Menús contextuales: Ideales para mostrar opciones adicionales o acciones específicas relacionadas con un elemento de la página cuando el usuario interactúa con él. Estos menús pueden contener enlaces, botones o cualquier otro elemento interactivo que permita al usuario realizar acciones contextuales de manera eficiente y natural.
- Ayuda contextual: Perfectos para proporcionar información adicional o explicaciones detalladas sobre elementos específicos sin interrumpir el flujo principal de la página. Esta funcionalidad es especialmente útil para mostrar definiciones, consejos o instrucciones paso a paso que ayuden al usuario a comprender mejor el contenido o la funcionalidad de la página.
- Formularios flotantes: Útiles para presentar formularios secundarios o campos de entrada adicionales que no necesitan estar siempre visibles en la interfaz principal. Esta aproximación mejora significativamente la experiencia del usuario al mantener la interfaz limpia y ordenada, mostrando información adicional solo cuando es necesaria.
- Paneles de configuración: Excelentes para mostrar opciones de configuración o preferencias que el usuario puede ajustar sin necesidad de navegar a otra página. Estos paneles pueden incluir múltiples controles y opciones de personalización, permitiendo a los usuarios modificar sus preferencias de manera rápida y conveniente mientras mantienen el contexto de su actividad principal.
Crear mensajes emergentes con popover en HTML5
Ahora ya nos vamos a poner a codificar para poder crear mensajes emergentes con popover en HTML5. Para ello, en HTML5, aparece el atributo general popover que nos sirve para poder crear mensajes emergentes. El funcionamiento de los popover en HTML5 tiene dos partes: por un lado, la forma en la que definimos el contenido del popover y por otro, cómo asociamos a un elemento la capacidad de mostrar el popover.
Para poder definir cuál es el elemento popover dentro de nuestra página web en HTML5 lo que hacemos es asignarle el atributo global popover:
<elemento popover="auto|manual|hint" id="identificador"></elemento>
Es muy importante que este elemento que tiene el atributo popover también tenga informado el atributo id dándole un identificador único en la página. Esto es debido a que el elemento que muestre el popover deberá de indicar el id del elemento que contiene el popover.
Así, podemos crear una capa mediante un elemento div que nos permita el mostrar un contenido con una imagen de la siguiente forma:
<div popover id="pop1"> <h2>Este es un popover de HTML5</h2> <img src="imagen.png" alt="Imagen en Popover"> </div>
La siguiente parte para crear mensajes emergentes con popover en HTML5 será asociar a un elemento la capacidad de mostrar el popover cuando se interactúe con dicho elemento. Por lo cual tiene que ser un elemento de acción, como puede ser un button o un elemento input. O bien asociar un comportamiento de interacción a un elemento mediante algún tipo de evento como onclick, onmouseover,…
En el caso de que tengamos un elemento de acción, vamos a utilizar el atributo popovertarget. Mediante el atributo popovertarget asociamos el id que contiene el elemento popover.
<elemento popovertarget="idpopover"></elemento>
Por lo que en nuestro caso vamos a asignar a un elemento button la capa que acabamos de crear:
<button popovertarget="pop1">Haz click aquí</button>
Vemos que utilizamos el id “pop1” que es el id que le habíamos asignado a nuestro elemento popover.
Otra forma de poder crear mensajes emergentes con popover en HTML5 sería mostrar el popover sería mediante código en Javascript. En este caso tendremos que asociar a un elemento un evento y en dicho evento mostrar el popover mediante el método .showPopover() del elemento HTMLElement.
let boton2 = document.getElementById("boton2");
let pop1 = document.getElementById("pop1");
boton2.onclick = function () {
pop1.showPopover();
}
En ambos casos, al pulsar sobre el botón, se mostrará el popover a pantalla completa.
Diferencia entre popover y dialog
Ahora que hemos visto cómo podemos crear mensajes emergentes con popover en HTML5 mediante el atributo popover y que sabemos cómo gestionar las ventanas emergentes mediante un elemento dialog, vamos a ver sus diferencias y cuándo utilizar cada uno de ellos.
Las principales diferencias entre el atributo popover y el elemento dialog radican en su propósito y comportamiento.
¿Cuándo utilizar dialog?
El elemento dialog está diseñado específicamente para interacciones modales que requieren una respuesta explícita del usuario. Es ideal para situaciones donde necesitamos que el usuario tome una decisión importante o complete una acción crítica, como confirmaciones de acciones irreversibles, formularios de registro importantes o ventanas de configuración esenciales. El elemento dialog bloquea intencionadamente la interacción con el resto de la página para asegurar que el usuario se centre en la tarea actual y proporcione la respuesta necesaria antes de continuar.
¿Cuándo utilizar popover?
El atributo popover está optimizado para presentar contenido informativo o contextual de manera más ligera y flexible. Es la opción perfecta cuando queremos mostrar información adicional, sugerencias, ayuda contextual o menús secundarios sin interrumpir significativamente la experiencia del usuario. A diferencia del dialog, el popover mantiene una interacción más natural y fluida con la página principal, permitiendo que el usuario pueda ignorarlo fácilmente si así lo desea y continuar con su actividad principal sin obstáculos. Esta característica lo hace especialmente útil para mejorar la experiencia del usuario sin crear interrupciones innecesarias en el flujo de trabajo.
Con esto ya habremos visto cómo podemos crear mensajes emergentes con popover en HTML5, en qué casos utilizarlo y cuáles son las diferencias entre los elementos dialog y popover.
