Tooltips clipped in action-pad

[MikeTschudi]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

When one hovers over an icon in an action pad, one gets a vertical scrollbar because the tooltip is appearing and being hidden:

Expected Behavior

Expect tooltip to escape action-pad boundaries and appear:

https://codepen.io/miketschudi/pen/bNbvByq?editors=1000

Reproduction Sample

https://codepen.io/miketschudi/pen/wBwmoZg?editors=1000

Reproduction Steps

please see reproduction sample codepen

Reproduction Version

3.0.0-next.95

Relevant Info

Windows 11 Enterprise; Chrome 131

Regression?

3.0.0-next.1

Priority impact

impact - p3 - not time sensitive

Impact

Currently only used in a prototype for release in the second AGO release of 2025.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Solutions

[jcfranco]

This is caused by #10241 (3.0 breaking change), where components with floating-ui elements may need overlay-positioning="fixed" in scrolling containers. I'm not sure whether the scroller is intentional though.

@driskull Do you recall if action-pad is meant to have a scrollbar? I noticed overflow has been present since its initial port.

As a workaround, you can set overlay-positioning="fixed" on tooltips to help them escape their container.

[macandcheese]

I think you could also move the Tooltips elements outside the Action Bar, which seems to resolve it while still allowing overlay-positioning="absolute" (default).

[MikeTschudi]

Thank you @jcfranco and @macandcheese for the easy workarounds! Completely solves the issue for my project.

[driskull]

Do you recall if action-pad is meant to have a scrollbar?

No, its not designed to scroll.