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.

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.

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.

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: https://www.npmjs.com/package/react-tooltip

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 https://react-bootstrap.github.io/components/overlays/ 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>