[bug]: Floating Tooltip component
PKulkoRaccoonGang opened this issue · comments
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.