javascript - reactjs中如何改变tooltip容器的宽度？

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"所以它适合容器盒。

Working example here...

但是现在我得到了工具提示应该显示 的要求。水平长 ，现在您可以看到它正在断字，并且容器是垂直的，宽度固定。但是如何更改工具提示容器的宽度以使文本在单行中水平长？

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

请帮助我更改 react Bootstrap 中工具提示容器的宽度。

Answer 1

<Tooltip className="mytooltip" ...>

css

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

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