@react-md/tooltip

@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 React, { 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"));

Changelog

2.1.0 (2020-07-12)

Bug Fixes

• AppBar text color now defaults to rmd-theme-var(text-primary-on-background) (2c3ea5e)
• Booleans in dist/scssVariables (f6d43a3)
• ListItem disabled states (7b37292)
• Scroll active element into view while focusing (a9a0902)
• Tree focused index after expanding all with asterisk (8547629)
• Tree keyboard movement for child items that are expanded (fadddc7)
• Tree scrolling elements into view (eef48dc)

Features

• Added new mixin for optional css-modules (28ba828)
• Exported the useAutoComplete hook (cac5cd1)
• Improved Dark Mode using Raising Elevation (547877c), closes #860
• Render non-searchable items in AutoComplete (e7a82ac)