How can I change the width of a tooltip container in React?

I am making a very simple React application where I am in the need to display a tooltip on hover over the text...

<OverlayTrigger
  placement="bottom"
  overlay={
    <Tooltip
      id="tooltip"
      style={{ width: "100%", wordBreak: "break-all" }}
    >
      thisisalongstringthanusualhencenotfilledincontiner
    </Tooltip>
  }
>
  <span>Hover over this text</span>
</OverlayTrigger>

Before I had the problem of making the tooltip content fit into container, so I have used wordBreak: "break-all", so it fits into the container box.

A working example is here...

But now I got the requirement that the tooltip should display horizontally long. Now you can see it is making word breaks and the container is vertical with a fixed width... But how can I change the width of the tooltip container to make the text horizontally long in a single line?

From the above code, the text thisisalongstringthanusualhencenotfilledincontiner should be displayed in a single line with the tooltip expanded...

How can I change the width of the tooltip container in react bootstrap?

<Tooltip className="mytooltip" ...>

CSS

.mytooltip > .tooltip-inner {
  max-width: 100%;
}

.mytooltip > .tooltip-arrow {
  ...
}