Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: TableToolbarMenu is missing tooltipPosition config prop #18278

Open
2 tasks done
kubijo opened this issue Dec 27, 2024 · 1 comment
Open
2 tasks done

[Bug]: TableToolbarMenu is missing tooltipPosition config prop #18278

kubijo opened this issue Dec 27, 2024 · 1 comment

Comments

@kubijo
Copy link
Contributor

kubijo commented Dec 27, 2024

Package

@carbon/react

Browser

Chrome, Safari, Firefox, Edge

Package version

1.72.0

Description

I'm rendering a DataTable component in a context where overflowing content introduces scrolling, and I've traced one such occasion to the TableToolbarMenu component because it uses your tooltip mechanism, but I'm unable to make it render inside the parent element.

My current workaround is this:

<TableToolbarMenu
    /**
     * The `iconDescription` prop
     *  - has a default value that doesn't make sense here
     *  - causes overflow of the parent element when hovered
     *  - the tooltip direction cannot be changed
     *
     * Giving it an empty string is a workaround that hides
     * the DOM based tooltip and adding a `title` re-introduces
     * labeling that does not break the layout.
     */
    iconDescription=""
    title="Filters"
    // …trimmed for brevity
/>

Screenshots

Default state

Image

Here, you can see the tooltip element being outside the parent when I force it to show (to be able to produce the screenshot)

Image

With my workaround

Image


Also of note: The default description text "settings" makes no sense in general context… you can't possibly know what is the purpose of that menu on the library level, which is surely worse in sense of A11Y then not having it at all.

Furthermore, the value of iconDescription prop propagates to both title & iconDescription of underlying OverflowMenu, but title given to TableToolbarMenu only propagates to title and the other prop gets the default.

As far as I'm concerned, the extra iconDescription doesn't make much sense, and I'd just drop it including the custom tooltip in favor of browser built-in title that does not cause layout issues and doesn't require tons of magic to make it work.

Steps to reproduce

Render the aforementioned component if fixed-sized div with overflow: auto

Code of Conduct

@kubijo
Copy link
Contributor Author

kubijo commented Dec 27, 2024

Also of note ... the problematic tooltip is not even visible. The visible thing is browsers title rendering.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: No status
Development

No branches or pull requests

1 participant