Cannot put Tooltip on OverflowMenu custom trigger icon

What package(s) are you using?

• carbon-components
• [x ] carbon-components-react

Detailed description

Describe in detail the issue you’re having.

I cannot put a Tooltip on an OverflowMenu icon.

Is this issue related to a specific component?

OverflowMenu and TooltipIcon

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

I expected this to happen without errors:

Instead, I got this error in the console:

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

I would love to have the ability to put a Tooltip on an OverflowMenu button.

What browser are you working in?

Chrome

My Code

<OverflowMenu
    style={{height: '3rem', maxHeight: '3rem', width: '3rem', background: '#f4f4f4'}}
    renderIcon={() => <TooltipIcon direction={"top"} align={"center"} style={{borderBottom: '0'}} tooltipText={"Status"}> <EventSchedule20 /> </TooltipIcon>}
>
{menuItems}
</OverflowMenu>

Thank you very much for your time! Hopefully there’s a workaround or a solution I’m missing.

[bitfede]

Thank you very much for your feedback @emyarod ! I managed to get it done! Here it is 😃 :

To achieve this I added the following props:

      <OverflowMenu
        ...
        className="bx--tooltip__trigger bx--tooltip--icon__top leftDropDownBtn"
        ariaLabel={"Category"}
        >
        {menuItems}
      </OverflowMenu>

And this CSS rule applied to these selectors:

.leftDropDownBtn.bx--tooltip--icon__top::after {
    transform: translate(20%, calc(-100% - 12px));
}

(previously the first argument to translate was -50%, that’s why it was going over the endge of the page)

So the reason why it was rendering "Menu" instead of "your tooltip label" was because I was using the prop aria-label instead of ariaLabel in camelcase. As soon as I renamed the prop from aria-label to ariaLabel the correct string showed up.

I’ll close the issue, hopefully anyone that has the same problem can find this helpful.

[emyarod]

you can add the .bx--tooltip--align-start (or align-end) class to change the alignment. these classes are just taken from the definition and icon tooltip

I’m not entirely sure where the text comes from without seeing your source code but it most likely is the text within .bx--assistive-text if you are following the tooltip/icon-only button markup