[EuiTooltip] Scrolls off the anchor upon page or parent scroll

[awahab07]

Summary

EuiTooltip attached to a button scrolls off the button when parent is scrolled. This might be only happening when the anchor element is itself on a popover. As is the below snapshot, the tooltip is attached to a button where the button is inside an overlay container (bottom sheet).

Video for reference:

https://user-images.githubusercontent.com/2748376/152554849-aeff9fd8-8b16-48be-baba-cb047856b747.mov

Consumer code for reference:

<EuiFlexItem grow={false} style={{ marginRight: 20 }}>
  <EuiToolTip content={TEST_NOW_DESCRIPTION}>
    <EuiButton
      fill
      size="s"
      color="success"
      iconType="play"
      onClick={() => onTestNow()}
      disabled={!isValid}
      data-test-subj={'monitorTestNowRunBtn'}
    >
      {testRun ? RE_RUN_TEST_LABEL : RUN_TEST_LABEL}
    </EuiButton>
  </EuiToolTip>
</EuiFlexItem>

Proposals 1:

Implement a prop repositionOnScroll on EuiTooltip which should reposition the tooltip when scrolled. EuiPopover already implements it, see. Also see RepositionScrollStrategy in Angular CDK Overlay.

Proposal 2:

Implement a prop hideOnScroll on EuiTooltip (and maybe also on EuiPopover) that when set to true, hides the tooltip when any scroll event happens in the scope of window. See CloseScrollStrategy in Angular CDK Overlay.

Proposal 3:

Implement both 1 and 2 above.

[thompsongl]

Just noting (after a refresher in the code) that EuiToolTip does not use EuiPopover, but instead uses one of its utils and mimics the behavior with EuiPortal + EuiToolTipPopover. Unless someone already has context on why this was done and whether it's still necessary/desired, it's probably worth exploring whether using EuiPopover is possible. In that case, we could just pass through the repositionOnScroll prop. Another option is to extract the positionPopover method from EuiPopover and make it available elsewhere as a util.

[chandlerprall]

The tooltip & popover components existed before popover's positioning logic came to be; that change never made its way into tooltips.

TBH the reposition logic should probably be on by default, it creates a small overhead during scroll (and browsers try to limit potential blocking of the UI) but it'd be better to not have the popover/tooltip fly away from its anchor.

[github-actions[bot]]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[thompsongl]

Had another report of this behavior today. Remains not high priority at the moment, but adding a label to ensure it doesn't get lost.

[shahzad31]

Team, can we please priorities fix for this? it's annoying when this happens.

[shahzad31]

There is a simple workaround though. If you change tooltip key, when it's disabled etc it will force re-render. that seems to resolve the issue.

[daveyholler]

We've prioritized this issue and labeled it as a bug.

[cee-chen]

This has been resolved in https://github.com/elastic/eui/pull/6515 - as of the next release/Kibana upgrade, you'll be able to add <EuiToolTip repositionOnScroll> to get this working!

[lizaemran]

I added repositionOnScroll on my EuiPopover but it repositions after a delay which does not look very nice