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

Question

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

<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

应显示在单行中，并展开工具提示...

如何更改 React Bootstrap 中工具提示容器的宽度？

Answer 1

<Tooltip className="mytooltip" ...>

CSS

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

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

Answer 2

在下面的类中添加此 CSS 属性。

.tooltip-inner {
    max-width: none;
}

Answer 3

您可以添加此 CSS 内容：

.tooltip .tooltip-inner {
  width: 7em;
  white-space: normal;
}

如果您检查它，您会发现默认情况下工具提示位于其引用的项目之后。所以你可以用 CSS 来定位它的宽度和内容。