Improve Twoslash Popover Display in Nextra

[Zih0]

Hello,

I would like to propose an enhancement regarding the display of the Twoslash popovers in Nextra. In the official Twoslash documentation, the popovers are displayed above the code blocks, which makes it easy to view the content. However, in Nextra, the popovers seem to be cut off inside the code blocks, making it difficult to read the content, especially when the popover is longer.

Would it be possible to implement a custom popover component in Nextra to address this issue? I noticed that the official Shiki/Twoslash documentation provides a renderer for Vue users (as seen here: https://shiki.matsu.io/packages/twoslash#rendererfloatingvue), and it seems feasible to create a similar implementation for React.

Additionally, another Next.js documentation library, Fumadocs, has already implemented this feature (you can find it here: https://github.com/fuma-nama/fumadocs/blob/1e715c93e53051fd699981e5c05c98750af7d6e6/packages/twoslash/src/index.ts#L38).

I believe this improvement would significantly enhance the user experience for those working with code blocks in Nextra. I would greatly appreciate your consideration of this request.

Thank you for your time and effort!

shiki/twoslash docs	nextra docs

[dimaMachina]

Definitely good improvement 👍

[dimaMachina]

Hi, would you like to submit the PR? Since you already investigated how to fix it 😁