How to create a tooltip in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Creating tooltips enhances user experience by providing contextual information on hover or focus without cluttering the interface. As the creator of CoreUI with over 25 years of development experience, I’ve implemented tooltip systems across numerous production applications. The most effective approach is using React state with mouse and focus event handlers to control tooltip visibility and positioning. This provides accessible, responsive tooltips that work with both mouse and keyboard navigation.
Use React state with mouse and focus event handlers to create accessible tooltips with proper positioning and timing.
import { useState } from 'react'
function Tooltip({ children, text, position = 'top' }) {
const [isVisible, setIsVisible] = useState(false)
const showTooltip = () => setIsVisible(true)
const hideTooltip = () => setIsVisible(false)
return (
<div className="tooltip-container">
<div
onMouseEnter={showTooltip}
onMouseLeave={hideTooltip}
onFocus={showTooltip}
onBlur={hideTooltip}
aria-describedby={isVisible ? 'tooltip' : undefined}
>
{children}
</div>
{isVisible && (
<div
id="tooltip"
role="tooltip"
className={`tooltip tooltip-${position}`}
>
{text}
</div>
)}
</div>
)
}
// Usage example
function App() {
return (
<Tooltip text="This button saves your changes" position="top">
<button>Save</button>
</Tooltip>
)
}
This tooltip implementation uses mouse events (onMouseEnter/onMouseLeave) and focus events (onFocus/onBlur) to show and hide the tooltip. The component includes proper ARIA attributes with aria-describedby linking to the tooltip content and role="tooltip" for screen reader compatibility. The position prop allows customizable tooltip placement around the trigger element.
Best Practice Note:
This is the same tooltip pattern used in CoreUI components for consistent, accessible help text. Consider adding a small delay before showing tooltips to prevent flashing during quick mouse movements, and ensure tooltip content is concise and helpful.
