1

更新：这似乎是一个 UX 问题，我在 GitHub 上创建了一个问题，您可以在此处跟踪：

https://github.com/reactstrap/reactstrap/issues/910#issuecomment-374369572

我正在使用 Reactstrap。

我只想在鼠标悬停 2 秒后显示工具提示。当我立即单击该按钮时，我不希望它显示出来。

但是现在当我立即单击按钮时，它会显示工具提示。

我尝试了控制Tooltip和UncontrolledTooltip，但都不起作用。

对于Tooltip，我尝试添加onClick={() => {}}，但也无济于事。

立即单击按钮时如何不显示工具提示？谢谢

Live demo

  constructor(props) {
    super(props);

    this.state = {
      isTooltipOpen: false
    };
  }

  onToggleTooltip = () => {
    const { isTooltipOpen } = this.state;
    this.setState({ isTooltipOpen: !isTooltipOpen });
  };

  render() {
    const { isTooltipOpen } = this.state;

    return (
      <div>
        <p>
          <button id="controlledTooltip">Controlled Tooltip</button>
        </p>
        <p>
          <button id="uncontrolledTooltip">Uncontrolled Tooltip</button>
        </p>

        <Tooltip
          delay={{ show: 2000, hide: 0 }}
          isOpen={isTooltipOpen}
          placement="right"
          target="controlledTooltip"
          toggle={this.onToggleTooltip}
          // onClick={() => {}}
        >
          Discard draft
        </Tooltip>

        <UncontrolledTooltip
          placement="right"
          target="uncontrolledTooltip"
          delay={{ show: 2000, hide: 0 }}
        >
          Hello world!
        </UncontrolledTooltip>
      </div>
    );
  }
4

1 回答 1

2

使用 setTimeOut() 函数。为防止丢失上下文 (this)，请使用箭头函数作为保留正确执行上下文的简单方法。

setTimeout(() => {
    this.setState({ isTooltipOpen: !isTooltipOpen });
}, 2000);

查看更新的工作示例：https ://codesandbox.io/s/j4ojkyv3l3

您还可以查看https://www.npmjs.com/package/react-hover-observer。这是一个 React 组件，它通知其子级悬停交互。它还支持延迟悬停和悬停，有助于减少意外触发。

于 2018-03-15T08:14:25.727 回答