You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
Here, you can see the tooltip element being outside the parent when I force it to show (to be able to produce the screenshot)
With my workaround
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
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 theTableToolbarMenu
component because it uses your tooltip mechanism, but I'm unable to make it render inside the parent element.My current workaround is this:
Screenshots
Default state
Here, you can see the tooltip element being outside the parent when I force it to show (to be able to produce the screenshot)
With my workaround
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 bothtitle
&iconDescription
of underlyingOverflowMenu
, buttitle
given toTableToolbarMenu
only propagates totitle
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-intitle
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
The text was updated successfully, but these errors were encountered: