Skip to content

Can't use Tooltip with Tab #6800

Open
@ArrayKnight

Description

Provide a general summary of the issue here

We have a design that calls for a series of Tabs with icons as their content, with a Tooltip for each to label them

🤔 Expected Behavior?

To be able to use Tooltip to augment Tab label

😯 Current Behavior

See the steps to reproduce as reference

  1. Wrapping TooltipTrigger around Tab never triggers the Tooltip
  2. Wrapping TooltipTrigger around a plain button within the Tab never triggers the Tooltip
  3. Wrapping TooltipTrigger around a RAC Button triggers the Tooltip, but breaks the ability to switch to the Tab/TabPanel
  4. Creating a custom label, following this example: https://react-spectrum.adobe.com/react-aria/useTooltipTrigger.html#example never triggers the Tooltip

💁 Possible Solution

No response

🔦 Context

The design is necessary due to limited space constraints

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/naughty-pascal-sgm27q

Version

"react-aria": "3.33.1", "react-aria-components": "1.2.1", "react-stately": "3.31.1",

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

  • Status

    🏗 In Progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions