vititu / react-ui-tooltip

React tooltip that shows under the cursor

react-ui-tooltip

A React component tooltip that shows below cursor, just like Chrome or Firefox.

Getting Started:

yarn add react-ui-tooltip

Usage:

You can optionally import a basic css.

import Tooltip from "react-ui-tooltip";
import "react-ui-tooltip/dist/styles.css";

function Component() {
  return (
    <Tooltip label="Hi, I'm a Tooltip!">
      <div>Hi', I'm just a regular "div"</div>
    </Tooltip>
  );
}

Styling:

You can also style with CSS using the data property like:

[data-react-ui-tooltip] {
  background: #201f1f;
  color: #ffffff;
}

Or just use "style", "className" or even CSS-in-JS:

import Tooltip from "react-ui-tooltip";
import style from "styled-components";
import "react-ui-tooltip/dist/index.css";

const StyledTooltip = styled(Tooltip)`
  background: #201f1f;
  color: #ffffff;
`;

function Component() {
  return (
    <StyledTooltip label="Hi, I'm a Tooltip!">
      <div>Hi', I'm just a regular "div"</div>
    </StyledTooltip>
  );
}