Question

更新：看起来像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>
    );
  }

Answer 1

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

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

请参阅更新，有效，示例：https://codesandbox.io/s/j4ojkyv3l3

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

如何在立即点击按钮时不显示工具提示？

1 个答案: