React Bootstrap 隐藏工具提示

Question

有没有办法默认隐藏 OverlayTrigger/Tooltip 元素？ 例如。 overlay={this.state.show ? <Tooltip>showing</Tooltip> : null} 有效但在控制台上抛出警告：

The prop overlay is marked as required in OverlayTrigger, but its value is null

这是唯一的方法吗？

{!this.state.show ? {component} :
 <OverlayTrigger ...>
   {component}
 </OverlayTrigger>
}

Answer 1

OverlayTrigger 组件必须传递 overlay 属性。如果您不想要工具提示，您也不希望触发覆盖。因此，如果 this.state.show 是假的，你会想要删除它。

{this.state.show 
  ? <OverlayTrigger overlay={<Tooltip>showing</Tooltip>}>
      <button>Click me!</button>
    </OverlayTrigger>
  : <button>Click me!</button>
}

编辑： 是的，您更新中的代码就是执行此操作的方法。

Answer 2

这对我有用，仅在布尔值为真时显示。

<OverlayTrigger
  overlay={
    boolean ? (
      <Tooltip id={`tooltip`}>important message for user</Tooltip>
    ) : (
      <span></span>
    )
  }
>
{children}
</OverlayTrigger>