Internal issue 2994 - IcTooltip not rendering properly inside IcDialog

[ticket-sync[bot]]

Running into a bit of trouble trying to attach a tooltip to a button inside a dialog component. The placement of the tooltip seems to be quite detached from the target component and, if the position of the tooltip goes outside of the dialog, then we just don't see anything rendered at all.

{noformat}import { IcButton, IcDialog, IcTooltip, IcTypography } from '@ukic/react';

import '@ukic/fonts/dist/fonts.css'; import '@ukic/react/dist/core/core.css';

const Dialog: FC = () => { return ( <> <IcDialog buttons={false} heading="Are you sure?" label="Coffee order" open size="medium" > <IcTooltip target="button-1" label="The tooltip does not render properly" placement="top" > <IcButton id="button-1">Tooltip</IcButton> </IcTooltip> <IcTypography variant="body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </IcTypography> <IcTooltip target="button-2" label="The tooltip does not render properly" placement="bottom" > <IcButton id="button-2">Tooltip</IcButton> </IcTooltip> </IcDialog> </> ); }; export default Dialog;{noformat}

[ad9242]

setting position:fixed, on the element with class="ic-tooltip-container" seems to solve the issue

There is already logic in tooltip to determine if it is on a dialog, so may be be worth investigation if that can be modified, or even removed

Another solution could be to add a new prop to tooltip that would set position: fixed. This would give users more control over tooltips. There is the potential that the tooltip may not move with it target element if scrolling, but may be an acceptable compromise until we can replace popperJS

[GCHQ-Developer-530]

Majority of work completed on branch 3351-tooltip-not-rendering-properly-on-dialog. Specific Windows issue noticed in PR so putting back to Ready for Dev for someone with Windows access to pick up that part of the issue.

[ad9242]

Attempted further changes under https://github.com/mi6/ic-ui-kit/pull/3718, but unable to find a solution that works across all browsers