User Interface > React Tooltip Examples

What React Tooltip library should I use?

React tooltips are a complicated component for a variety of reasons. A tooltip needs to know about the size of the hover element, the content of the tooltip, and even its position relative to the browser window to know where to position itself. Add in hover and delay to accurately show and hide the tooltip and you've introduced even more difficulty in implementation.

For this reason we recommend using a Tooltip library. Such libraries are react-tooltip and material-ui's Tooltip. In the above video you can see us demo both these components.

There is no clear winner for what the best Tooltip library is. The options are quite limiting and tricky to modify. In our test, we were easily able to add a box shadow on react-tooltip. However, Material UI did not let us add a box-shadow because the Tooltip arrow is done with borders which can't easily sit on top of a box-shadow.

On the other hand, Material UI has much more community support compared to react-tooltip which doesn't appear to be maintained.

Lesson 6/7

import React, { useState } from "react";
import ReactTooltip from "react-tooltip";
import styled from "styled-components";
import { withStyles } from "@material-ui/core/styles";
import MaterialTooltip from "@material-ui/core/Tooltip";

// Watch the tutorial
// http://react.school/ui/tooltip

const Container = styled.div`
  background-color: lightblue;
  width: 300px;
  margin: 40px auto;
  padding: 10px;
  text-align: center;
`;

const StyledReactTooltip = styled(ReactTooltip)`
  background-color: white !important;
  color: black !important;
  box-shadow: 0px 2px 20px lightgray;
  &:after {
    border-top-color: white !important;
  }
`;

const LightTooltip = withStyles((theme) => ({
  tooltip: {
    backgroundColor: theme.palette.common.white,
    color: "rgba(0, 0, 0, 0.87)",
    boxShadow: theme.shadows[1],
    fontSize: 11,
  },
  arrow: {
    color: "white",
  },
}))(MaterialTooltip);

export default function App() {
  const [enabledThing, setEnabledThing] = useState(false);
  return (
    <div>
      <Container data-tip data-for="happyFace">
        react-tooltip default
      </Container>
      <ReactTooltip id="happyFace">
        <span>Show happy face</span>
      </ReactTooltip>
      <Container data-tip data-for="sadFace">
        react-tooltip styled
      </Container>
      <StyledReactTooltip id="sadFace" effect="solid">
        <span>Show sad face</span>
      </StyledReactTooltip>
      <MaterialTooltip title="Tooltip text">
        <Container>Material UI default</Container>
      </MaterialTooltip>
      <LightTooltip
        interactive
        arrow
        PopperProps={{
          modifiers: {
            offset: {
              enabled: true,
              offset: "0px, -10px",
            },
          },
        }}
        title={
          <label>
            Set thing
            <input
              onChange={(e) => {
                setEnabledThing(e.target.checked);
              }}
              checked={enabledThing}
              type="checkbox"
            />
          </label>
        }
      >
        <Container>
          Material UI interactive
          <div>Thing set? {enabledThing ? "yes" : "no"} </div>
        </Container>
      </LightTooltip>
    </div>
  );
}

Open Sandbox