feat(react-headless-components-preview): adopt Interest Invokers (interestfor) for Tooltip intent#36348
Open
micahgodbolt wants to merge 1 commit into
Open
Conversation
…erestfor) for Tooltip intent
Wire the trigger to the hint popover via the native `interestfor` attribute so
supported browsers open/close the tooltip on hover/focus with no JS. The existing
JS timer engine remains as a fallback and is skipped when CSS.supports('interest-delay: 0s')
is true to avoid double-driving. onToggle now syncs React state for native opens as
well as closes, and the show/hide effect is made idempotent against :popover-open.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
Pull request demo site: URL |
Contributor
|
I don't think we can add this in a nearest future:
|
spmonahan
reviewed
Jul 6, 2026
| (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => { | ||
| // When Interest Invokers are supported the browser shows the hint popover on | ||
| // hover/focus via `interestfor`; skip the JS timer so we don't double-drive it. | ||
| if (supportsInterestInvokers()) { |
Contributor
There was a problem hiding this comment.
We should factor this out into module scope (or useMemo)
// module scope
const SUPPORTS_INTEREST_INVOKERS = supportsInterestInvokers();or
// Component scope
const supportsInvokers = useMemo(() => supportsInterestInvokers(), []);This will always be true for the life of the application. No reason to recompute it constantly.
spmonahan
reviewed
Jul 6, 2026
| * @see https://open-ui.org/components/interest-invokers.explainer/ | ||
| */ | ||
| const supportsInterestInvokers = () => | ||
| typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('interest-delay: 0s'); |
Contributor
There was a problem hiding this comment.
Is there an SSR test? This may fail.
Hotell
added
the
Resolution: Won't Do
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Stretch proposal from #36346. Adopts the native Interest Invokers API (
interestfor+interest-delay) so the headless Tooltip'spopover="hint"opens on hover/focus declaratively, with no JS in supporting browsers — while keeping the existing JS timer engine as a graceful fallback everywhere else.This complements (and is independent of) the minimal anchor-name fix in #36347.
What changed
packages/react-components/react-headless-components-preview/library/src/components/Tooltip/useTooltip.ts:interestforon the trigger → the tooltip content id. The attribute is harmlessly ignored where unsupported, and is placed before the child's own props so an author can override it.onEnterTrigger/onLeaveTriggerearly-return whenCSS.supports('interest-delay: 0s'), so we don't double-drive show/hide when the platform is already handling intent.onTogglenow mirrors React state for bothopenandclosednewState, so a browser-driven interest open keepsvisiblein sync (previously onlyclosedwas handled).showPopover()when not already:popover-open, and onlyhidePopover()when it is — so the effect never fights the platform (and never throwsInvalidStateErroron a redundantshowPopover()).Detection is client-only (inside the handlers); the
interestforattribute is rendered deterministically, so there's no SSR/hydration mismatch.Why progressive enhancement
Tests
Tooltip.test.tsx:interestforon the trigger equals the tooltip content id.CSS.supports('interest-delay: 0s')is stubbed true, the JS timer is skipped (the platform would open it instead).All 19 Tooltip tests pass.
Notes / follow-ups
interest-delaymatching: I prototyped settinginterest-delay: <showDelay> <hideDelay>to match the configured JS cadence, but the positioning engine rewrites the content element's inlinestyle, so the value was clobbered. Matching the delay cleanly belongs in the positioning style writer — happy to follow up if maintainers want it. Browsers fall back to the spec default delay in the meantime.interestforin its DOM/React types; the attribute is plain lowercase so React passes it through to the DOM as-is.Related: #36346 (root cause + proposals), #36347 (minimal anchor-name fix).