Question

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

道具overlay在OverlayTrigger标记为必需，但其值为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>

React Bootstrap隐藏工具提示

2 个答案: