Descripción
El atributo global popover de HTML nos permite definir elementos emergentes en la página web. Los elementos emergentes son elementos HTML que se muestran por encima del contenido principal, como diálogos, menús o tooltips. Este atributo nos ayuda a controlar cómo y cuándo se muestran estos elementos emergentes.
Sintaxis
popover = auto | manual | hint
Los valores que puede tener el atributo popover son los siguientes, cada uno con un comportamiento específico para controlar la visualización del elemento emergente:
- auto, que es el valor por defecto, permite que el elemento emergente se muestre y se oculte de forma automática según la interacción del usuario. Además, cierra todas las ventanas de popover que estén abiertas.
- manual, que requiere un control explícito mediante JavaScript para mostrar y ocultar el elemento emergente, proporcionando así un mayor control sobre su comportamiento. Además, no cierra las popover que estén abiertas.
- hint, que está diseñado específicamente para elementos emergentes informativos como tooltips o sugerencias, con un comportamiento optimizado para este tipo de contenido. Cierra otros popover de tipo hint que estén abiertos, pero no los popover de tipo auto.
Ejemplo
Veamos un ejemplo de cómo podemos utilizar el atributo popover para crear un elemento emergente en nuestra página web:
<div id="menu" popover="auto">
<h3>Menú de Navegación</h3>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#productos">Productos</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</div>
<button popovertarget="menu">Abrir Menú</button>
En este ejemplo, hemos creado un menú emergente que se muestra automáticamente cuando el usuario hace clic en el botón. El atributo popovertarget del botón se vincula con el id del elemento emergente para controlar su visualización.
Artículos
Vídeos HTML
Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.