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.

One option is just to do it in CSS. It's not quite as flexible, but with markup like:

<div className="tooltip-on-hover">Hover here</div>
<div className="tooltip">This is the tooltip</div>

You could do:

.tooltip {
  ...
  visibility: hidden;  /* Or display: none, depending on how you want it to behave */
}

.tooltip-on-hover:hover + .tooltip {    /* Uses the adjacent sibling selector */
  visibility: visible;  /* Or display: block */
}

Example:

.tooltip { display: none; }
.tooltip-on-hover:hover + .tooltip { display: block; }

<div class="tooltip-on-hover">Hover here</div>
<div class="tooltip">This is the tooltip</div>

You could also nest the tooltip inside the element so you could use a normal descendant selector like .tooltip-on-hover:hover .tooltip. You could even use a ::before or ::after pseudo-element, there are guides around on how to do this.

I think whatever you want to show as tooltip, just add that to the "title" of the div where you want to show it.

Eg:

<div title="I am the tooltip text">I am the div where you should hover</div>

But if its a custom designed div then go as the answers given before.

You can also use React Mapple ToolTip which is easy to use and customize and also comes with predefined themes.

Disclaimer: I am the author of this library

reactjs-mappletooltip

Install npm package:

npm install react-tooltip

Usage:

import ReactTooltip from "react-tooltip";

<div data-tip="msg to show" data-for='toolTip1' data-place='top'>Tooltip</div>
<ReactTooltip id="toolTip1" />

You can use react-tooltip package. Super easy to use and handy also.

Installation: npm i react-tootip.

Example: 1. import it :

import ReactTooltip from "react-tooltip"

2. Include it in your component:

   <div className="createContent"> **<ReactTooltip />** <div className="contentPlaceholder">

3. add tool tip to your button/div or any element: data-tip="add tooltip message"

<button className="addSection" data-tip="add tooltip message" onClick={() => this.onAddChild()}>+</button>

package url:

import Tooltip from "@material-ui/core/Tooltip";

const HtmlTooltip = withStyles((theme) => ({
    tooltip: {
      backgroundColor: 'rgba(255,250,228)',
      color: 'rgba(0, 0, 0, 0.87)',
      maxWidth: 400,
      fontSize: theme.typography.pxToRem(12),
      border: '1px solid #dadde9',
    },
  }))(Tooltip);

 headerName: 'FEEDBACK',
    field: "remarks",
      flex: 0.30,
        renderCell: (params: GridCellParams) => (
          <Grid>
            <HtmlTooltip title={params.value} placement="bottom">
              <Typography style={{ color: "inherit", cursor: "pointer" }}>{params.value}</Typography>
            </HtmlTooltip>
          </Grid>
        )

In case, if you are using react-bootstrap in your project, then use Overlay with the tooltip.

MouseEnter and MoverLeave need to be used though.

<OverlayTrigger
  placement="right"
  delay={{ show: 250, hide: 400 }}
  overlay={renderTooltip}>
   <div>on hover here we will show the tooltip</div>
</OverlayTrigger>