How to make overflow scroll appear horizontally but make the overflow of the tooltip be visible vertically and horizontally?

How do you make it so that the overflow scroll of this container(horizontally), appears while the vertical overflow is visible as well? On top of that, I would also want the absolutely positioned tooltip/popup to have its overflow to show horizontally.

Basically, I need to:

  • show overflow scroll horizontally
  • show overflow of the popup anywhere(right now it only appears below or above, but not on the left side or right side on top of its parent container)

https://play.tailwindcss.com/Xf3dc6YkLW

Here’s what I’m trying to achieve:
enter image description here

red line being the scrollbar, and the black box, being the tooltip, being able to appear on top of its parent div