javascript - ボタンをすぐにクリックしたときにツールチップを表示しない方法は?

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>
    );
  }