ux: tooltip should not show when click the button when use delay

[hongbo-miao]

Issue description

• components: tooltip
• reactstrap version 4.0.0
• import method not sure
• react version 16.2.0
• bootstrap version 5.0.0 beta 2

What is happening?

I am using delay to show tooltip after 2s. However, now when I click the button immediately, it also shows the tooltip.

It happens to both Tooltip and UncontrolledTooltip.

It is just a user experience issue, not really a bug.

Code

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>
        <button id="controlledTooltip">Controlled Tooltip</button>
        <button id="uncontrolledTooltip">Uncontrolled Tooltip</button>

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

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

[TheSharpieOne]

We currently have a click/touch listener which will toggle the tooltip if it is not showing

reactstrap/src/Tooltip.js

Lines 140 to 150 in c89bdea

	handleDocumentClick(e) {
	if (e.target === this._target || this._target.contains(e.target)) {
	if (this._hideTimeout) {
	this.clearHideTimeout();
	}
	if (!this.props.isOpen) {
	this.toggle();
	}
	}
	}

I think this is mostly for touch screens, but it probably should still honor the delay. We should probably change it to call this.onMouseOverTooltip() instead of this.toggle()

[hongbo-miao]

Hi @TheSharpieOne just let me know if need me do something. Thanks again!

[lucas-teks]

Do you have any idea of how to fix it please? This is very problematic for me, when I use it on a button, with or without delay, the Tooltip will shows again and stays like a popover until I out focus the button.

[maazadeeb]

Looks like this is fixed in the reactstrap@8? https://codesandbox.io/s/practical-night-wdmkq

[GoPro16]

^8.2.0 introduced a side effect that not if you want to get the desired behavior you will additionally need to pass trigger="click hover focus" to the tooltip.