Interest Invoker API

The Interest Invoker API lets you declaratively show popovers when user interest is detected—on hover, keyboard focus, or long-press. Combined with CSS Anchor Positioning, you can build tooltips and hover cards without JavaScript.

Basic Usage

Connect a trigger element to a popover using the interesttarget attribute. The popover appears when the user shows interest—hovering, focusing, or long-pressing.

<button interesttarget="my-tooltip">
  Hover me
</button>

<div id="my-tooltip" popover="hint">
  Tooltip content here
</div>

The "hint" Popover Type

Unlike popover="auto", a hint popover doesn't close other open popovers. This is perfect for tooltips that should appear alongside menus or dialogs.

<!-- Regular popover - closes others when opened -->
<div popover="auto">Menu content</div>

<!-- Hint popover - doesn't affect other popovers -->
<div popover="hint">Tooltip content</div>

CSS Control

Fine-tune the behavior with CSS properties for timing and trigger styling.

/* Control show/hide delays */
[interesttarget] {
  interest-target-delay: 200ms 100ms;
  /* first value: delay before showing */
  /* second value: delay before hiding */
}

/* Style trigger when interest is active */
[interesttarget]:has-interest {
  outline: 2px solid var(--accent);
}

With CSS Anchor Positioning

Combine with CSS Anchor Positioning for automatic, responsive placement. The popover will reposition itself to stay within the viewport.

/* Define the anchor on the trigger */
[interesttarget] {
  anchor-name: --trigger;
}

/* Position the popover relative to anchor */
[popover] {
  position: fixed;
  position-anchor: --trigger;
  position-area: top;
  margin-bottom: 0.5rem;
}

Interactive Demo

Hover over the buttons to see the popovers. Uses nativeinterestforand CSS Anchor Positioning.

Tooltip

popover="hint"

Hover Card

Rich preview card

hint vs auto Comparison

Open the click popover, then hover the hint button - the hint won't close the auto popover!

popover="auto"

popover="hint"

Native Code

<!-- HTML - No JS needed! -->
<button interestfor="my-tip">Hover me</button>
<div id="my-tip" popover="hint">Tooltip</div>

/* CSS */
[popover] {
  position-area: top;
  margin: 0;
}

Try on CodePen →

interestfor

Shows popover on hover, focus, or long-press. No JS needed.

popover="hint"

Doesn't close auto popovers. Perfect for tooltips.

position-area

CSS property for anchor positioning (top, bottom, left, right).

:has-interest

Style the trigger when user is hovering.

Use Cases

Tooltips: Show helpful hints on hover without blocking other UI.
User hover cards: Preview user profiles when hovering @mentions.
Link previews: Show page previews before clicking links.
Definition tooltips: Explain terms inline without modal dialogs.

vs. title Attribute

The interesttarget attribute replaces the unstylable title attribute. Unlike native tooltips, interest-invoked popovers are fully customizable, support rich content, and integrate with the accessibility tree properly.