[bug]: Floating Tooltip component

[Peter Kulko]

Components: IconButtonWithTooltip, AlertModal, useTooggle

Description

We use these components to open the modal by clicking on the IconButtonWithTooltip with the help of handlers that are provided by the useToggle hook. When hovering over IconButtonWithTooltip, a tooltip appears, and when AlertModal opens you can notice a visual glitch - a tooltip that was above the button changes position and stays on the page under the newly opened modal for about half a second.

Screen.Recording.2024-02-11.at.22.10.52.mov

Tried to use another approach with OverlayTrigger but got the same result.

<OverlayTrigger
    show={showPopover}
    trigger={[‘hover’, ‘focus’]}
    overlay={(
      <Tooltip id=“tooltip-top”>
        <div>Delete</div>
      </Tooltip>
    )}
>
    <IconButton
      src={DeleteOutlineIcon}
      iconAs={Icon}
      onMouseEnter={() => handlePopoverToggle(true)}
      onMouseLeave={() => handlePopoverToggle(false)}
      onFocus={() => handlePopoverToggle(true)}
      onBlur={() => handlePopoverToggle(false)}
      onClick={confirmOpen}
    />
</OverlayTrigger>

It looks like when the modal appears, the focus changes, after which the blur event is triggered and the tooltip is removed.

Maybe it is an option to make a trick that will remove the focus from the button, and postpone the call of the modal, but this will affect the user experience and is not a universal solution, since there are similar problems in the textbook, certificates, and configurations pages.