如何在reactjs中更改工具提示容器的宽度？

Question

我正在制作一个非常简单的 reactjs 应用程序，我需要在将鼠标悬停在文本上时显示工具提示。

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

在我遇到使工具提示内容适合容器的问题之前，我已经使用了wordBreak: "break-all"它，因此它适合容器框。

这里的工作示例...

但是现在我得到了工具提示应该显示水平长的要求，现在你可以看到它正在断字并且容器是垂直的并且宽度固定..但是我怎样才能改变工具提示容器的宽度来使文本水平长在一行中？？

从上面的代码中，文本thisisalongstringthanusualhencenotfilledincontiner应该显示在一行中，并带有扩展的工具提示..

请帮助我更改反应引导程序中工具提示容器的宽度..

Answer 1

<Tooltip className="mytooltip" ...>

css

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

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