reactjs中如何改变tooltip容器的宽度？答案

【问题标题】：How to change the width of tooltip container in reactjs?reactjs中如何改变tooltip容器的宽度？
【发布时间】：2020-05-25 10:28:15
【问题描述】：

我正在制作一个非常简单的 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 中工具提示容器的宽度..

【问题讨论】：

你想在单个单词上自动加宽，不管它有多长？
@Kumar，在我的实际应用程序中，它将是一个由大约 250 个连续字符组成的令牌，所以无论文本有多长，我都想在一行中显示整个字符串。应该只显示在一行中，例如thisisalongstringthanusualhencenotfilledincontiner ..

标签： javascript css reactjs twitter-bootstrap react-bootstrap

【解决方案1】：

你可以添加这个css

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

如果您检查，您会看到工具提示默认放置在它所引用的项目之后。所以你可以用 CSS 来定位它的宽度和东西。

【讨论】：

【解决方案2】：

<Tooltip className="mytooltip" ...>

css

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

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

【讨论】：

【解决方案3】：

在下面的类中添加 css 属性。

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

【讨论】：