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

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

<kbd>Live demo</kbd>

  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 https://github.com/reactstrap/reactstrap/blob/c89bdea5ca7b90641708438c2415463996f2ab76/src/Tooltip.js#L140-L150

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()

[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.