There is a flicker of the page when tooltip is hovered over

[clye-cog]

Prerequisites

• I have searched for duplicate or closed issues
• I have read the contributing guidelines

Describe the issue

Demo:
https://github.com/user-attachments/assets/95f12fe2-37ca-48be-824b-d9cbd2c30cea

Description:
There seems to be a flicker of the page on hover of the tooltip. Reproduced this at viewport 1048px onwards till about 2055px

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

Describe your frontend stack. What version of React and @govtechsg/sgds-react are you using? CSR or SSR?

2.7.4 Typescript Nextjs

[clukhei]

@clye-cog I can't replicate the flicker in our nextjs app. Could you provide a simple codesandbox of just the replication of the tooltip flickering during hover ?

Also your tooltip width seems to be above 200px, even though we set a max-width of 200px? Did you make any modifications to the tooltip? It will be helpful if u could paste your tooltip code here too.