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

nvartolomei · Answer 1 · 2019-08-03T14:28:24.443

29

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.

edited Aug 03 '19 at 14:28

answered Dec 22 '15 at 20:26

nvartolomei

1,505
12
15

thanks , how about if I want the external div to have its own content rendered outside in html ,, and all I want to add is add the behaviour of hover to it ,, so say this hover functionality can be a reusable module for tooltips ? – sisimh Dec 23 '15 at 14:15
I mean I dont want to build the onMouseOver div inside my reactjs code ,, I just want to add the hover behaviour on it , doable ? – sisimh Dec 23 '15 at 14:16
@sisimh you could use composition, something like a wrapper that will help you to achieve this without repeating yourself in multiple places. Though it depends on your specific requirements. – nvartolomei Dec 23 '15 at 22:24
Working example doesn't work anymore. You need to import React from Codepen instead of the custom URL. – JoseHdez_2 Feb 25 '21 at 00:45

score 17 · Answer 2 · answered Nov 11 '20 at 07:23

17

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.

answered Nov 11 '20 at 07:23

Jagrati Kothari

171
1
2

simple and pragmatic, thanks – Nivethan Jun 26 '22 at 13:37

score 14 · Answer 3 · edited Jun 08 '20 at 08:10

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 should be using `className` rather than `class` for React. — kojow7, Dec 19 '19 at 05:27
@kojow7 That's true if we're talking about JSX, good catch. I just referred to it as markup though, which technically could just be the HTML output (especially since nothing in my answer is React specific), and it mimics the "HTML" that was written in the question. — Inkling, Dec 20 '19 at 09:26

score 6 · Answer 4 · answered May 05 '20 at 05:07

6

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

answered May 05 '20 at 05:07

Harshal

7,562
2
30
20

2

I tryied and works like a charm. Thanks for this example!!! – Dayán Ruiz Sep 20 '20 at 14:49
Still works in 2021. Thank you boss. Been wondering why my conditional render and various other try outs didn't work. Please explain the rationale behind using *data-* attributes and why isn't this in their docs for React ToolTip? Thank you so much – Nzadibe Nov 28 '21 at 20:11

Mahesh Haldar · Answer 5 · 2020-02-14T12:25:34.683

5

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

edited Feb 14 '20 at 12:25

answered Oct 01 '16 at 07:09

Mahesh Haldar

581
1
6
16

7

Missing a disclosure there, since its your library. Handy, but messes a bit with the fine alignment of the divs. – Fábio Dias Feb 13 '18 at 16:25

score 3 · Answer 6 · answered Apr 22 '20 at 18:35

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"

Include it in your component:

<div className="createContent"> **<ReactTooltip />** <div className="contentPlaceholder">
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

score 1 · Answer 7 · answered Sep 22 '21 at 10:00

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>
        )

Gowrishankar R · Answer 8 · 2019-12-20T11:15:00.597

0

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>

edited Dec 20 '19 at 11:15

answered Dec 20 '19 at 10:05

Gowrishankar R

21
4

tooltip div with ReactJS

objective

HTML

8 Answers8

Linked