[OverflowMenuItem] itemText cannot put Tooltip component

[dawang021]

What package(s) are you using?

"carbon-components": "10.22.0",
"carbon-components-react": "7.22.0",

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

Is this issue related to a specific component?

What did you expect to happen? What happened instead? What would you like to
see changed?

What browser are you working in?

What version of the Carbon Design System are you using?

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

Steps to reproduce the issue

1. Use OverflowMenu, OverflowMenuItem component in DataTable TableCell.
2. The whole OverflowMenu cannot open anymore.

Sandbox reproduce: https://codesandbox.io/s/overflow-menu-with-tooltip-8iykr?file=/src/index.js

Additional information

• Screenshots or code
• Notes

[tw15egan]

@dawang021 it is really helpful if you fill out the issue template so we can help you get sorted out properly. Do you have a link to a reproducible example on CodeSandbox? I am unable to reproduce the problem on our end: https://react.carbondesignsystem.com/?path=/story/datatable--with-overflow-menu

[dawang021]

@tw15egan please take a look at this demo in sandbox: https://codesandbox.io/s/overflow-menu-with-tooltip-8iykr?file=/src/index.js

[tw15egan]

I don't believe Tooltip is supported inside of an overflow menu. Overflow menu actions should be short, concise actions that do not need additional information. You could place the tooltip outside of the menu if more information is needed.

Please see this link for more info: https://www.carbondesignsystem.com/components/overflow-menu/usage#formatting

[dawang021]

@tw15egan But it works in lower version https://codesandbox.io/s/overflow-menu-with-tooltip-working-well-hsdwo?file=/src/index.js.

The reason why I want to add Tooltip in OverflowMenuItem is OverflowMenuItem can be disabled, so I want to let users know why this OverflowMenuItem is disabled.

[tw15egan]

OverflowMenu items that are disabled are not in the tab order, so a keyboard user would not be able to navigate to this item and it would cause an a11y violation. That is why this pattern is not recommended.

[dawang021]

What is your recommendation/implementation using OverflowMenuItem to notify users why this item is disabled?

I don't think there isn't a need to not let users know the reason for disabled actions.

[tw15egan]

What action are they trying to take that might be disabled? Could any type of UX pattern be used outside of the overflow menu to let the user know why they cannot do something? Does that item even need to be shown if it is not a viable action? Posting user flows here would help our team give guidance around this situation

[dawang021]

In IBM cloud VPC load balancer backend pools, we give the reason why this pool is not able to delete.

[tw15egan]

Can you try setting focusTrap={false} on the Tooltip? Or perhaps try using TooltipDefinition?

[emyarod]

I don't think TooltipDefinition would be valid DOM since it would be nesting a button within a button (maybe it would work if you add an href to the OverflowMenuItem since that changes the element to an anchor I believe). seems iffy though

<OverflowMenuItem
  href="#" // renders <a> rather than <button>
  itemText={
    <TooltipDefinition tooltipText="some tooltip text">
      Option 2
    </TooltipDefinition>
  }
/>

your best bet until the Carbon interactive tooltip gets overhauled is probably using requireTitle and title

<OverflowMenuItem
  requireTitle
  itemText="Option 2"
  title="some tooltip text"
/>

edit: looks like custom title is not supported since it defaults to itemText when requireTitle is true (resolved in #7277)

[emyarod]

related #6605

[sstrubberg]

hey @dawang021, thanks for creating the issue. What you're trying to accomplish here with Tooltip and OverflowMenu isn't a supported pattern. This is most likely going to create an accessibility violation.