javascript - tooltip div with ReactJS

Question

objective

I have a div that I want to make act like a tooltip with reactjs.

HTML

<div>on hover here we will show the tooltip</div>
<div>
    <div class="tooltip_custom">this is the tooltip!!</div>
</div>

I am used to angularjs using the ng-show with a condition on the <div> , I was wondering if there is such binding in reactjs , or else how can I do this functionality ?

Thanks

Answer 1

You can make your component to return the following markup

return (
  <div>
    <div onMouseOver={this.handleMouseIn.bind(this)} onMouseOut={this.handleMouseOut.bind(this)}>on hover here we will show the tooltip</div>
    <div>
      <div style={tooltipStyle}>this is the tooltip!!</div>
    </div>
  </div>
);

Where tooltipStyle is assigned like this:

const tooltipStyle = {
  display: this.state.hover ? 'block' : 'none'
}

So tooltip depends on component state, now in handleMouseIn and handleMouseOut you need to change component state to make tooltip visible.

handleMouseIn() {
  this.setState({ hover: true })
}

handleMouseOut() {
  this.setState({ hover: false })
}

Here is working example.

You can start diving in React with this article: Thinking in React.