如何使反应引导工具提示适合容器？

Question

我正在制作一个使用 react-bootstrap 的简单反应应用程序。在这里，我尝试使用OverlayTrigger 显示一个非常非常简单的工具提示，

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

显示工具提示工作正常，但对齐不正确。

你可以看到我在工具提示中给出了连续的字符串（在我的真实应用程序中，字符串是动态的，它是一个标记，并且会比我上面给出的更长，所以我不能更改这个连续的字符串）。

问题是在悬停时只有一小部分字符串可见，其余部分不在容器中。

工作沙盒： https://codesandbox.io/s/react-bootstrap-tooltip-button-modal-wjybr

尝试将style={{ width: "100%" }} 提供给工具提示但没有成功。它仍然不适合工具提示容器。

我需要使它适合容器。所以请帮助我将整个字符串放入工具提示容器中。

Answer 1

您可以简单地使用word-break css 属性，并为其提供“break-all”值，这样如果文本太长，它将被分成不同的行。

<Tooltip id="tooltip" style={{ width: "100%", wordBreak:'break-all' }}>
  thisisalongstringthanusualhencenotfilledincontiner
</Tooltip>

我已经通过here 复制了一个工作演示。