React-tooltip: div onClick event handler will not trigger if there is tooltip

[jhlee4]

handleThis = () => {
  console.log('click')
}
render () {
  return (
    <div
      data-tip
      data-for={'testThis'}
      data-event={click}
      onClick={this.handleThis}
    >
    .
    .
    .
    <ReactToolTip id='testThis' />
  )
}

I was only able to see first 'click' on the console.
it seems to ignore onClick handler after the first click.

[sgyyz]

due to the data-event={'click'}, it will not trigger your custom onClick method. But you can try afterShow to trigger your own code.

  const _afterShow = () => {
    console.log("after show");
  };

  return (
    <div className="App">
      <h1>React Tooltip Customize Event</h1>
      <button
        data-tip={"show the tips!"}
        data-for={"tooltip"}
        data-event={"click"}
      >
        Show Tooltip
      </button>

      <ReactTooltip
        id="tooltip"
        globalEventOff={"click"}
        afterShow={_afterShow}
      />
    </div>
  );

check it out: https://codesandbox.io/embed/cocky-proskuriakova-9du5i

[jhlee4]

due to the data-event={'click'}, it will not trigger your custom onClick method. But you can try afterShow to trigger your own code.

  const _afterShow = () => {
    console.log("after show");
  };

  return (
    <div className="App">
      <h1>React Tooltip Customize Event</h1>
      <button
        data-tip={"show the tips!"}
        data-for={"tooltip"}
        data-event={"click"}
      >
        Show Tooltip
      </button>

      <ReactTooltip
        id="tooltip"
        globalEventOff={"click"}
        afterShow={_afterShow}
      />
    </div>
  );

check it out: https://codesandbox.io/embed/cocky-proskuriakova-9du5i

thank you. I used different library to temporarily fix this problem.but I'll definitely try that out

[lestgabo]

@sgyyz I tried out your solution. It worked well! Thanks. and @jhlee4 thank you for the detailed question, I found it easy to search hahahha.

added this line into my afterShow={() => this.handleItemClick(rowIndex, columnIndex)}