jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML Tools

Free Interest Invoker Popover Generator

Create hover and focus-triggered popovers using the interestfor invoker command (Chrome 142+). The commandfor and command attributes on buttons let you open popovers declaratively — no JavaScript event listeners needed. Pair with the popover attribute for tooltips, hover cards, and keyboard-accessible popups.

Loading tool...

What is Interest Invoker Popover Generator?

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().

quickAnswer

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+.

limitations

  • 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.

How to use this tool

  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.

What you can use it for

  • 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.

Use cases

Practical examples

example

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.

example

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.

Common mistakes

  • 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.

verification

  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

Questions about Interest Invoker Popover Generator

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.

Related tools

More html tools

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Html

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool

Also try

Also try

Seo

AI Crawler robots.txt Builder

Build a robots.txt policy for AI crawlers. Choose from open, selective, or strict presets and block specific AI training bots while allowing search engines.

Open tool