Skip to main content
react-md - Tooltip - Installation


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.


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 \


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