jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas HTML

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?

The interestfor invoker command is a declarative HTML attribute (Chrome 142+) that opens a popover when the user hovers over or focuses the trigger element. Set commandfor='popover-id' and command='interestfor' on a button, and popover='hint' on the target div. The popover opens on hover AND focus, making it keyboard-accessible by default. This replaces manual mouseenter/mouseleave handlers with popover.showPopover()/hidePopover().

Respuesta rápida

Use commandfor='popover-id' and command='interestfor' on a button to open a popover on hover and focus without JavaScript. Set popover='hint' on the target for tooltip behavior. Chrome 142+.

Limitaciones

  • The interestfor command requires Chrome 142+. Other browsers do not support it yet, and there is no polyfill. The popover simply won't open in unsupported browsers.
  • Popovers opened with interestfor cannot contain interactive content — they close when focus moves away. For interactive popups, use togglePopover or showPopover on click instead.
  • interestfor requires the popover target to be in the DOM at page load. Dynamically created popover elements need to be registered before interestfor can reference them.

Cómo usar esta herramienta

  1. Create a popover element with the popover attribute set to hint (for tooltips) or auto.
  2. Add a trigger button with commandfor pointing to the popover id and command set to interestfor.
  3. Optionally add CSS for hover styling on the trigger and position the popover with anchor positioning.
  4. Test that the popover opens on both mouse hover and keyboard focus for accessibility.

Para qué puedes usarla

  • Create an accessible tooltip that opens on hover and focus without writing a single line of JavaScript.
  • Build a hover card preview for product links that shows details when the user hovers or tabs to the link.
  • Replace JavaScript-based hover menus with declarative popovers that work consistently across mouse and keyboard.

Casos de uso

Ejemplos prácticos

Ejemplo

Accessible tooltip on an info icon

An info icon button uses commandfor='info-tip' and command='interestfor' to open a popover with popover='hint'. Users hovering with a mouse see the tooltip. Keyboard users tabbing to the button also trigger it — no extra code needed.

Ejemplo

Product card hover preview

A product grid has popover hover cards for each item. The commandfor points to a popover with the product image, price, and add-to-cart button. Hover triggers are faster and simpler than click-to-open patterns.

Errores comunes

  • Forgetting to set popover='hint' on the popover — using popover='auto' causes the popover to close on light dismiss, conflicting with the hover behavior.
  • Using interestfor for critical UI like forms or links inside the popover — the popover closes when the user moves focus away, making interactive content inaccessible.
  • Not adding visible hover/focus styling on the trigger button — users need to know which elements have hover-activated popovers.

Verificación

  1. Hover over the trigger button in Chrome 142+ and confirm the popover opens. Move the mouse away and confirm it closes.
  2. Tab to the trigger button with the keyboard and confirm the popover opens on focus. Tab away and confirm it closes.

FAQ

Preguntas sobre Generador de popover interest invoker

What is the difference between interestfor and togglePopover?

interestfor opens the popover on hover and focus, and closes it when the user moves away. togglePopover opens and closes on click, keeping the popover open until clicked again. Use interestfor for tooltips and hover cards. Use togglePopover for menus and dialogs that need click interaction.

Does interestfor work with keyboard navigation?

Yes. interestfor responds to both mouse hover and keyboard focus. When a user tabs to the trigger button, the popover opens automatically. When they tab away, it closes. This makes interestfor popovers keyboard-accessible by default.

Can I control the delay before the popover opens?

Yes. Use the interesttarget-delay CSS property on the trigger element or the popover itself. interesttarget-delay: 300ms adds a 300ms delay before opening. This prevents accidental popovers when the user moves their mouse across the page quickly.

Herramientas relacionadas

Más herramientas html

Prueba también

Prueba también