tooltip div with ReactJS


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


<div>on hover here we will show the tooltip</div>
    <div class="tooltip_custom">this is the tooltip!!</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 ?


You can make your component to return the following markup

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


<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 */


Read More:   Using Rhino instead of ScriptEngine to run Javascript code in Java

.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

enter image description here

Install npm package:

npm install react-tooltip


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.

1. import it :

import ReactTooltip from "react-tooltip"
  1. Include it in your component:

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

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

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

Read More:   Remove a specific inline style with Javascript|jQuery

MouseEnter and MoverLeave need to be used though.

  delay={{ show: 250, hide: 400 }}
   <div>on hover here we will show the tooltip</div>

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts