时间戳

首页 > 解决方案 > 如何使反应引导工具提示适合容器？

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

问题描述

我正在制作一个使用 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%" }}工具提示但没有运气..它仍然不适合工具提示容器..

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

标签： javascriptcssreactjstwitter-bootstrapreact-bootstrap

解决方案

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

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

我在这里复制了一个工作演示。

推荐阅读