website·Indexed 32 days ago
https://react-tooltip.com/Documentation for ReactTooltip, a floating React element that displays information related to an anchor element. Covers installation, basic usage, and advanced configuration for versions v5 and v6, including data attributes, imperative mode, custom styling, and upgrade guides from v4 to v6.
data-tooltip-html attribute and the html prop. Version 6 supports React 19 while maintaining compatibility with React 16.14+.main), and configure the build output directory to build/ (the default for React projects). DigitalOcean offers a free tier for up to 3 static sites.# 1. Add GitHub remote
git remote add origin https://github.com/your-username/your-repo.git
# 2. Push code to main branch
git add .
git commit -m "Initial commit"
git push -u origin maintype prop used for coloring tooltips in v4 has been replaced by the variant system in v5. In v5, you can apply the variant via the data-tooltip-variant attribute on the anchor element. Available variant values are: 'dark', 'light', 'success', 'warning', 'error', and 'info'.// V4 Approach
<ReactTooltip id="tooltip" type="success" />
// V5 Approach
import { Tooltip } from 'react-tooltip';
<a
data-tooltip-id="my-tooltip"
data-tooltip-content="Hello world!"
data-tooltip-variant="success"
>
◕‿‿◕
</a>
<Tooltip id="my-tooltip" />In react-tooltip v6, you can control a tooltip programmatically by passing a ref created with React.useRef() to the ref prop of the <Tooltip /> component. This provides access to methods like open() and close(), as well as read-only internal state variables.
If you intend to use the tooltip exclusively via these methods and want to disable the default hover-based behavior, set the imperativeModeOnly prop to true.
import { useRef } from 'react';
import { Tooltip, TooltipRefProps } from 'react-tooltip';
const MyComponent = () => {
const tooltipRef = useRef<TooltipRefProps>(null);
return (
<>
<a id="my-element">Hover me or click button</a>
<button
onClick={() => {
tooltipRef.current?.open({
anchorSelect: '#my-element',
content: 'Hello world!',
});
}}
>
Open Tooltip
</button>
<button onClick={() => tooltipRef.current?.close()}>
Close Tooltip
</button>
<Tooltip ref={tooltipRef} />
</>
);
};type prop used for coloring tooltips in V4 has been renamed to variant in V5. In V5, the variant can be applied via the data-tooltip-variant attribute on the anchor element. Available variant values are: 'dark', 'light', 'success', 'warning', 'error', and 'info'.// V4
<ReactTooltip id="tooltip" type="success" />
// V5
import { Tooltip } from 'react-tooltip';
<a
data-tooltip-id="my-tooltip"
data-tooltip-content="Hello world!"
data-tooltip-variant="success"
>
◕‿‿◕
</a>
<Tooltip id="my-tooltip" />clickable prop to the <Tooltip /> component.<a id="clickable">Hover me</a>
<Tooltip anchorSelect="#clickable" clickable>
<button>You can click me!</button>
</Tooltip>anchorSelect prop on the <Tooltip /> component to target elements using a CSS selector.import { Tooltip } from 'react-tooltip';
<a id="my-anchor-element">◕‿‿◕</a>
<Tooltip
anchorSelect="#my-anchor-element"
content="Hello world!"
/>Several props from previous versions are deprecated in v5. Use the following replacements:
html with children or the render prop.anchorId with data-tooltip-id (on the anchor element) or the anchorSelect prop.events with the openOnClick prop, or use openEvents, closeEvents, and globalCloseEvents for advanced customization.In V5, ReactTooltip.rebuild() is no longer necessary. The component automatically watches for DOM changes and updates accordingly. The getContent prop has been removed. To handle dynamic content, you can now:
content prop of the Tooltip.data-tooltip-content attribute on the anchor element.render prop for complex dynamic rendering based on the active anchor element.!important.import { Tooltip } from 'react-tooltip'
<style>
/* Use a parent class to increase specificity */
.example-container .example-custom {
color: #222;
background-color: rgb(0, 247, 255);
border-radius: 0; /* Example: removing radius */
}
</style>
<div className="example-container">
<a data-tooltip-id="my-tooltip-styles" data-tooltip-content="Hello world!">
◕‿‿◕
</a>
<Tooltip id="my-tooltip-styles" className="example-custom" />
</div><TooltipProvider /> and <TooltipWrapper /> APIs were deprecated in v5 and removed in v6. In v6, you no longer need a provider. Instead, render a <Tooltip /> instance near your app root or near the anchor elements it controls. To link an element to a tooltip, use the data-tooltip-id attribute on the anchor element, matching the id prop of the <Tooltip /> component.// src/App.jsx
import { Tooltip } from 'react-tooltip'
function App() {
return (
<>
<MyComponent />
{/* Render the tooltip instance once near the root */}
<Tooltip id="app-tooltip" />
</>
)
}
export default Appchildren or the render prop. React 19 is supported, while compatibility with React 16.14+ is maintained.