CODEWITHSUNDEEP
javascriptreactjsreactstrap
Hongbo Miao
Hongbo Miao

Reputation: 49804

How to not show tooltip when click the button immediately?

UPDATE: It seems likes an UX issue, I created an issue on GitHub, you can track here:

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

I am using Reactstrap.

I want to show tooltip only when after hovering mouse 2 seconds. When I click the button immediately, I don't want it be shown.

But right now when I click the button immediately, it shows the tooltip.

I tried both controlled Tooltip and UncontrolledTooltip, but neither works.

For Tooltip, I tried to add onClick={() => {}}, but also does not help.

How to not show tooltip when click the button immediately? Thanks

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

Upvotes: 2

Views: 5269

Answers (2)

N4ppeL
N4ppeL

Reputation: 1847

As in the github issue linked by you it was mentioned that in version ^8.2.0 there is a trigger property. So you can pass trigger="hover focus" and omit "click" now. That worked fine for me.

Upvotes: 0

Yvo Linssen
Yvo Linssen

Reputation: 343

Make use of the setTimeOut() function. To prevent loosing context (this), use the arrow function as a simple way to preserve proper execution context.

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

See updated, working, example: https://codesandbox.io/s/j4ojkyv3l3

You can also take a look at https://www.npmjs.com/package/react-hover-observer. This is a React component that notifies its children of hover interactions. It also supports delayed hover and hover-off, which can help reduce unintentional triggering.

Upvotes: 1

Related Questions