Skip to content

Unify tap/click tooltip behaviour #568

Description

@gaidheal1

Background

Mobile tooltips are currently broken: tapping opens the tooltip very briefly before it closes, and press-and-hold keeps it open but triggers the browser's native text-selection gesture.

PR #566 (merged to staging, commit 082b5ce) attempted a mobile-only fix: toggling a controlled open state on touch pointerdown and calling preventDefault() to suppress the compatibility click that was re-closing it. This didn't fully resolve the tap behaviour, and doesn't address the text-selection issue at all — preventDefault() on pointerdown doesn't suppress the browser's native long-press-to-select/context-menu gesture; that needs touch-action / -webkit-touch-callout CSS, which the current fix doesn't touch.

Decision

Rather than patching the mobile-only hover/tap split further, unify the interaction model across mobile and desktop:

  • Replace hover-to-open (desktop) and tap-to-open (mobile) with a single click/tap-to-toggle model on both platforms.
  • Clicking or tapping anywhere else — including on elements with no tooltip of their own — dismisses any currently-open tooltip.

Acceptance Criteria

  • Tooltip opens on click (desktop) or tap (mobile) of its trigger, and closes if the same trigger is clicked/tapped again
  • Clicking or tapping anywhere outside the open tooltip's trigger — including on unrelated elements with no tooltip — closes it
  • No native text-selection or context-menu gesture fires on long-press of a tooltip trigger on mobile (touch-action/-webkit-touch-callout or equivalent)
  • Hover-open behaviour is removed on desktop (hover may still be used for cursor affordance, but must not open the tooltip)
  • Verified on at least one real mobile device or accurate touch emulation, not just desktop responsive mode
  • Existing usages of the Tooltip component across the app are checked for any that relied on hover-open behaviour

Notes

Supersedes the mobile-only approach in PR #566. Not blocking the current staging→main release.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    Status
    Done

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions