primevue icon indicating copy to clipboard operation
primevue copied to clipboard

Tooltip is not fully accessible, ESC does not dismiss hover tooltips and tooltip collapses when pointer enters it

Open daniel-hitchins opened this issue 5 months ago • 0 comments

Describe the bug

The tooltip directive does not meet required accessibility interaction behavior. The tooltip behaves differently depending on input method:

  • Tooltips opened by mouse hover cannot be dismissed with ESC
  • Tooltips collapse immediately when moving the pointer from the trigger into the tooltip content
  • Tooltip interaction is inconsistent between keyboard and mouse
  • Only tooltips opened by focus are dismissible via ESC
  • Tooltip is not operable by mouse and keyboard equally

This creates an accessibility failure because:

  • Some users are keyboard-only
  • Some users are mouse-only
  • Both groups must receive equivalent operability

This also contradicts the accessibility expectations described in the Tooltip documentation and Storybook examples.

The behavior fails the requirements of WCAG 1.4.13 Content on Hover or Focus, which requires that such content must be:

  • dismissible (ESC must work regardless of input method)
  • hoverable (tooltip must remain when pointer enters it)
  • persistent (must stay visible until user dismisses it)

Pull Request Link

No response

Reason for not contributing a PR

  • [ ] Lack of time
  • [ ] Unsure how to implement the fix/feature
  • [ ] Difficulty understanding the codebase
  • [ ] Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-17fo33xx?file=src%2FApp.vue

Environment

  • Windows 11
  • Chrome 142

Vue version

3.5.18

PrimeVue version

4.3.9

Node version

22.14

Browser(s)

Chrome 142

Steps to reproduce the behavior

  1. Register tooltip directive normally (no options)
  2. Apply tooltip to a button:
<button v-tooltip="'Tooltip text'">Hover or focus me</button>
  1. Hover the button
  • Tooltip appears
  1. Move pointer toward tooltip content
  • Tooltip collapses prematurely
  1. While tooltip is visible from hover, press ESC
  • Tooltip does not dismiss
  1. Tab to the button to focus it
  • Tooltip appears
  1. Press ESC
  • Tooltip dismisses only in this case

Expected behavior

Tooltip behavior should be:

  • Fully operable by both keyboard and mouse, because different users rely on different input methods
  • Consistent regardless of how it was opened (hover or focus)
  • Dismissible via ESC even when opened by mouse hover
  • Hoverable, meaning it should remain visible when pointer enters tooltip content
  • Persistent until user dismisses it, not collapsing automatically
  • Matching the accessibility expectations shown in Storybook

This ensures compliance with accessibility guidelines and real-world usage where:

  • Keyboard-only users must be able to open and dismiss tooltips
  • Mouse-only users must be able to hover tooltips without them disappearing
  • Users with motor impairments may switch between input types
  • Interaction must not change based on input device
  • ESC does not dismiss hover-triggered tooltips
  • Tooltip collapses when pointer enters tooltip content
  • Keyboard and mouse interactions differ
  • Only focus-triggered tooltips dismiss correctly

This behavior fails:

WCAG 1.4.13 Content on Hover or Focus

  • Not dismissible
  • Not hoverable
  • Not persistent

It affects:

  • keyboard-only users
  • mouse-only users
  • users with mobility impairments
  • users who require predictable interaction

daniel-hitchins avatar Nov 24 '25 17:11 daniel-hitchins