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:

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.