[EuiToolTip] Tooltip should adjust its position when the anchor element moves

[acstll]

Describe the bug When a tooltip is anchored to an element (e.g. button) that is fixed-positioned and that changes positions when clicked, the tooltip won't follow. This creates an unwanted state where the tooltip is visible but not correctly positioned.

The repositionOnScroll prop does not help in this case, because there is no scrolling involved. The position that changes is the anchor's (button), not the scroll.

Impact and severity I don't think it's common pattern to have a button fixed-positioned, that moves as it gets clicked, but this issue was reported so it should have some end-user impact.

Environment and versions

• EUI version: 99.0.0
• React version: 18
• Kibana version (if applicable): ~
• Browser: ~
• Operating System: ~

To Reproduce You need a button that:

• uses EuiToolTip
• has position: fixed (or absolute)
• changes position when it gets clicked

Expected behavior The tooltip element should adjust its position to follow its anchor.

Minimum reproducible sandbox https://codesandbox.io/p/sandbox/gallant-shockley-629j49

Screenshots

[JasonStoltz]

We may be able to solve this by adding a dismiss callback, which would let consumers programatically dismiss tooltips. That would solve this particular use case indirectly.

[JasonStoltz]

@acstll You had some thoughts about anchoring, could you add them here as well?

[acstll]

The new CSS anchor() API

• Introducing the CSS anchor positioning API
• anchor() on MDN

[vera]

We've noticed this bug as well. However, we are not using a button with position: fixed or absolute.

In our case, the button moves because other DOM elements are inserted before it due to the button click.

I've created a sandbox showing that here: https://codesandbox.io/p/sandbox/peaceful-voice-229s4j

https://github.com/user-attachments/assets/9bf826c3-cb06-4544-bc29-ef744b2192a5

The code sandbox also includes a hack/fix to close the tooltip after the button click, so the bug doesn't become visible.

To close the tooltip, unfocus the button by calling blur in the onClick function:

onClick={(e) => {
            e.currentTarget.blur();
            // ...
        }}

(cc @julian-schneider who found the fix)

[github-actions[bot]]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

[acstll]

related: https://github.com/elastic/eui/issues/7102