@react-md/tooltip

Create accessible tooltips within react-md based on the material design specifications.

Usage no npm install needed!

<script type="module">
  import reactMdTooltip from 'https://cdn.skypack.dev/@react-md/tooltip';
</script>

README

@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

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

import { Fragment } from "react";
import { render } from "react-dom";
import { Button } from "@react-md/button";
import { Tooltipped } from "@react-md/tooltip";

const App = () => (
  <Tooltipped id="button-id" tooltip="I am a tooltip">
    <Button>Button Text</Button>
  </Tooltipped>
);

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