React component for Tippy.js 4.
npm i @tippy.js/react
CDN: https://unpkg.com/@tippy.js/react
Requires React 16.8+, prop-types, and tippy.js if using via CDN.
Required props: tooltip content as props.content and a single element child
(reference) as props.children.
import React from 'react'
import Tippy from '@tippy.js/react'
const StringContent = () => (
<Tippy content="Hello">
<button>My button</button>
</Tippy>
)
const JSXContent = () => (
<Tippy content={<span>Tooltip</span>}>
<button>My button</button>
</Tippy>
)
const VariousProps = () => (
<Tippy content="Hi" arrow={true} duration={500} delay={[100, 50]}>
<button>My button</button>
</Tippy>
)If you want to use a component as a child, ensure you forward the ref to the DOM node:
import React, { forwardRef } from 'react'
function ThisWontWork() {
return <button>Text</button>
}
const ThisWillWork = forwardRef((props, ref) => {
return <button ref={ref}>Text</button>
})
function App() {
return (
<Tippy content="Tooltip">
<ThisWillWork />
</Tippy>
)
}See the Tippy.js docs
Prop to control the tippy.enable() / tippy.disable() instance methods. Use
this when you want to temporarily disable a tippy from showing.
function App() {
const [isEnabled, setIsEnabled] = useState(true)
return (
<Tippy content="test" isEnabled={isEnabled}>
<button />
</Tippy>
)
}Prop to control the tippy.show() / tippy.hide() instance methods. Use this
when you want to programmatically show or hide the tippy instead of relying on
UI events.
function App() {
const [isVisible, setIsVisible] = useState(true)
return (
<Tippy content="test" isVisible={isVisible}>
<button />
</Tippy>
)
}Note 1: You should also set the
hideOnClickprop tofalseif you don't want the tippy to hide when the user clicks on the document somewhere.
Callback invoked when the Tippy instance has been created. Use this when you need to store the Tippy instance on the component.
function App() {
const tippyInstance = useRef()
return (
<Tippy
content="test"
onCreate={instance => (tippyInstance.current = instance)}
>
<button />
</Tippy>
)
}You can nest the components, ensuring they have a multiple prop:
<Tippy placement="bottom" multiple>
<Tippy placement="left" multiple>
<Tippy placement="right" multiple>
<Tippy multiple>
<button />
</Tippy>
</Tippy>
</Tippy>
</Tippy>Wraps the tippy.group()
method.
import Tippy, { TippyGroup } from '@tippy.js/react'
function App() {
return (
<TippyGroup delay={1000}>
<Tippy content="a">
<button />
</Tippy>
<Tippy content="b">
<button />
</Tippy>
</TippyGroup>
)
}You can create a new component file that imports the component and sets the default props. From this file, you can import the component throughout your app.
import Tippy from '@tippy.js/react'
Tippy.defaultProps = {
...Tippy.defaultProps,
arrow: true,
}
export default Tippy
// In another file
import Tippy from './Tippy'As an example, you might want to distinguish between a tooltip and a popover by creating a separate component for both.
export const Tooltip = props => <Tippy {...props} />
Tooltip.defaultProps = {
animation: 'fade',
arrow: true,
delay: 150,
theme: 'translucent',
}
export const Popover = props => <Tippy {...props} />
Popover.defaultProps = {
animateFill: false,
animation: 'scale',
interactive: true,
interactiveBorder: 10,
theme: 'light-border',
trigger: 'click',
}
// In another file
import { Tooltip, Popover } from './Tippy'MIT