jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas de HTML y accesibilidad

Gratis Generador de popover interest invoker

Genere HTML declarativo con interestfor para popovers activados por hover y focus sin JavaScript.

Cargando herramienta...

Qué es Generador de popover interest invoker?

El comando invoker interestfor es un atributo HTML declarativo (Chrome 142+) que abre un popover cuando el usuario pasa el ratón sobre el elemento disparador o lo enfoca. Establezca commandfor='popover-id' y command='interestfor' en un botón, y popover='hint' en el div objetivo. El popover se abre al pasar el ratón Y al enfocar, haciéndolo accesible por teclado por defecto. Esto reemplaza los manejadores manuales mouseenter/mouseleave con popover.showPopover()/hidePopover().

Respuesta rápida

Use commandfor='popover-id' y command='interestfor' en un botón para abrir un popover al pasar el ratón y al enfocar sin JavaScript. Establezca popover='hint' en el objetivo para comportamiento de tooltip. Chrome 142+.

Last updated: 2026-06-03

Limitaciones

  • El comando interestfor requiere Chrome 142+. Otros navegadores aún no lo soportan y no hay polyfill. El popover simplemente no se abrirá en navegadores no compatibles.
  • Los popovers abiertos con interestfor no pueden contener contenido interactivo: se cierran cuando el foco se aleja. Para popups interactivos, use togglePopover o showPopover al hacer clic.
  • interestfor requiere que el destino del popover esté en el DOM al cargar la página. Los elementos popover creados dinámicamente deben registrarse antes de que interestfor pueda referenciarlos.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Cree un elemento popover con el atributo popover establecido en hint (para tooltips) o auto.
  2. Añada un botón disparador con commandfor apuntando al id del popover y command establecido en interestfor.
  3. Añada opcionalmente CSS para estilos de hover en el disparador y posicione el popover con anchor positioning.
  4. Pruebe que el popover se abra tanto al pasar el ratón como al enfocar con teclado para accesibilidad.

Para qué puedes usarla

  • Crear un tooltip accesible que se abra al pasar el ratón y al enfocar sin escribir una sola línea de JavaScript.
  • Construir una vista previa de tarjeta hover para enlaces de producto que muestre detalles cuando el usuario pasa el ratón o navega con tabulador al enlace.
  • Reemplazar menús hover basados en JavaScript con popovers declarativos que funcionen consistentemente con ratón y teclado.

Casos de uso

Ejemplos prácticos

Ejemplo

Tooltip accesible en un icono de información

Un botón de icono de información usa commandfor='info-tip' y command='interestfor' para abrir un popover con popover='hint'. Los usuarios que pasan el ratón con el mouse ven el tooltip. Los usuarios de teclado que navegan con tabulador al botón también lo activan: sin código adicional.

Ejemplo

Vista previa hover de tarjeta de producto

Una cuadrícula de productos tiene popovers hover para cada elemento. El commandfor apunta a un popover con la imagen del producto, precio y botón de añadir al carrito. Los disparadores hover son más rápidos y simples que los patrones de clic para abrir.

Errores comunes

  • Olvidar establecer popover='hint' en el popover: usar popover='auto' causa que el popover se cierre al hacer clic fuera, entrando en conflicto con el comportamiento hover.
  • Usar interestfor para UI crítica como formularios o enlaces dentro del popover: el popover se cierra cuando el usuario mueve el foco fuera, haciendo que el contenido interactivo sea inaccesible.
  • No añadir estilos visuales de hover/foco en el botón disparador: los usuarios necesitan saber qué elementos tienen popovers activados por hover.

Verificación

  1. Pase el ratón sobre el botón disparador en Chrome 142+ y confirme que el popover se abre. Aleje el ratón y confirme que se cierra.
  2. Navegue con tabulador al botón disparador con el teclado y confirme que el popover se abre al enfocar. Navegue fuera con tabulador y confirme que se cierra.

FAQ

Preguntas sobre Generador de popover interest invoker

¿Cuál es la diferencia entre interestfor y togglePopover?

interestfor abre el popover al pasar el ratón y al enfocar, y lo cierra cuando el usuario se aleja. togglePopover abre y cierra al hacer clic, manteniendo el popover abierto hasta que se hace clic de nuevo. Use interestfor para tooltips y tarjetas hover. Use togglePopover para menús y diálogos que necesitan interacción de clic.

¿Funciona interestfor con navegación por teclado?

Sí. interestfor responde tanto al hover del ratón como al foco del teclado. Cuando un usuario navega con tabulador al botón disparador, el popover se abre automáticamente. Cuando navega fuera, se cierra. Esto hace que los popovers interestfor sean accesibles por teclado por defecto.

¿Puedo controlar el retardo antes de que se abra el popover?

Sí. Use la propiedad CSS interesttarget-delay en el elemento disparador o en el propio popover. interesttarget-delay: 300ms añade un retardo de 300ms antes de abrir. Esto evita popovers accidentales cuando el usuario mueve el ratón rápidamente por la página.

Herramientas relacionadas

Más herramientas de html y accesibilidad

Prueba también

Prueba también

Herramientas de CSS y diseño

Generador de carruseles CSS

Genera el marcado de un carrusel CSS nativo con scroll-snap, botones de desplazamiento, marcadores y una estructura de lista accesible. No requiere JavaScript.

Abrir herramienta