@react-md/tooltip
v5.1.6 accessibility a11y react-md material design react tooltip magic tooltip component components and 1 more...
@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 { 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"));
npm i @react-md/tooltip
Metadata
- MIT
- Whatever
- Mikkel Laursen
- released 12/11/2023