how to set boundary for tooltip in react-tooltip

import { Tooltip } from "react-tooltip"
const TestTooltip = () => {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        width: "100vw",
        height: "100vh",
      }}
    >
      <div
        style={{
          width: "300px",
          height: "400px",
          position: "relative",
          border: "1px solid gray",
          padding: "3px",
        }}
      >
        <div
          style={{
            overflow: "hidden",
            overflowY: "scroll",
            height: "100%",
            width: "100%",
          }}
        >
          <p data-tooltip-id="my-tooltip" style={{ width: "50%" }}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Pellentesque feugiat erat vel maximus tincidunt. Vivamus vitae
            lectus eros. Aenean lacus dolor, condimentum vitae felis vitae,
            congue molestie felis. Morbi aliquam neque ut aliquam 
          </p>
          <Tooltip
            style={{
              backgroundColor: "rgb(0, 255, 30)",
              color: "#222",
              position: "absolute !important",
            }}
            id="my-tooltip"
            content="Hello world!"
          />
        </div>
      </div>
    </div>
  )
}

export default TestTooltip