Polaris React Tooltip Position Misaligned on Hover

Polaris
1

Hey,

I’m using the Polaris React Tooltip component to display helper text on hover.
However, I’m facing an issue where the tooltip appears in the wrong position — it’s slightly misplaced and not aligned with the target element, as shown in the attached screenshot.

The tooltip does render, but its position is offset, making the UI look inconsistent.

Issue Details:

  • Component: @shopify/polaris → Tooltip

  • Issue: Tooltip displays, but the position is incorrect/misaligned

  • Expected: Tooltip should appear directly above, below, or beside the target (based on configuration)

  • Actual: Tooltip appears shifted away from the hover element (see screenshot)

Screenshot:

image
image329×161 5.6 KB

Steps to Reproduce:

  1. Add a Polaris Tooltip around a text or icon element.

  2. Hover over the element.

  3. Observe the tooltip position — it is not appearing at the correct location.

  4. Issue occurs consistently across different tooltips.

Additional Notes:

  • No custom CSS applied that overrides tooltip styling.

  • Tested on multiple devices/browsers.

  • Tooltip content displays correctly; only the positioning is incorrect.

  • Possibly related to container positioning or layout calculation on hover.

Could someone from the Shopify team or community help confirm whether this is a known issue or if there is any recommended workaround?

Thank you!