@react-md/tooltip

Create accessible tooltips to add additional descriptions to buttons, links, or any other element. The tooltips will automatically attempt to position themselves within the viewport and adjust as needed.

Installation

npm install --save @react-md/tooltip

It is also recommended to install the following packages as they work hand-in-hand with this package:

npm install --save @react-md/theme \
  @react-md/button

Usage

import { render } from "react-dom";
import { Button } from "@react-md/button";
import { Tooltip, useTooltip } from "@react-md/tooltip";

function App() {
  const { elementProps, tooltipProps } = useTooltip({
    baseId: "button-id",
    onClick(event) {
      // an optional click handler for the button
    },
  });

  return (
    <>
      <Button {...elementProps}>Button Text</Button>
      <Tooltip {...tooltipProps}>I am a tooltip</Tooltip>
    </>
  );
}

render(<App />, document.getElementById("root"));