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

Posted 2023-02-22

【中文标题】reactjs中如何改变tooltip容器的宽度？

【英文标题】：How to change the width of tooltip container in reactjs?

【发布时间】：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 ..

【参考方案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;