How to Create Tooltip in React: Simple Guide with Example

To create a tooltip in React, use a functional component with useState to track hover state and conditionally render the tooltip text. Wrap the target element and show the tooltip when the mouse is over it using onMouseEnter and onMouseLeave events.

Syntax

A tooltip in React typically uses a wrapper element with event handlers onMouseEnter and onMouseLeave to toggle visibility. The tooltip text is conditionally rendered based on a state variable, often managed with useState.

Key parts:

• useState: to track if tooltip is visible
• onMouseEnter and onMouseLeave: to show/hide tooltip
• Conditional rendering: to display tooltip only when hovered

jsx

import React, { useState } from 'react';

function Tooltip({ text, children }) {
  const [visible, setVisible] = useState(false);

  return (
    <span
      onMouseEnter={() => setVisible(true)}
      onMouseLeave={() => setVisible(false)}
      style={{ position: 'relative', cursor: 'pointer' }}
    >
      {children}
      {visible && (
        <div style={{
          position: 'absolute',
          bottom: '100%',
          backgroundColor: 'black',
          color: 'white',
          padding: '5px 8px',
          borderRadius: '4px',
          whiteSpace: 'nowrap',
          zIndex: 1
        }}>
          {text}
        </div>
      )}
    </span>
  );
}

Example

This example shows a button with a tooltip that appears when you hover over it. The tooltip text is "Click me to perform an action".

jsx

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';

function Tooltip({ text, children }) {
  const [visible, setVisible] = useState(false);

  return (
    <span
      onMouseEnter={() => setVisible(true)}
      onMouseLeave={() => setVisible(false)}
      style={{ position: 'relative', cursor: 'pointer' }}
      aria-label={text}
      role="tooltip-wrapper"
    >
      {children}
      {visible && (
        <div style={{
          position: 'absolute',
          bottom: '100%',
          left: '50%',
          transform: 'translateX(-50%)',
          backgroundColor: 'black',
          color: 'white',
          padding: '5px 8px',
          borderRadius: '4px',
          whiteSpace: 'nowrap',
          zIndex: 1
        }} role="tooltip">
          {text}
        </div>
      )}
    </span>
  );
}

function App() {
  return (
    <div style={{ padding: '50px', fontFamily: 'Arial' }}>
      <Tooltip text="Click me to perform an action">
        <button>Hover me</button>
      </Tooltip>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Output

A button labeled 'Hover me' that shows a black tooltip with white text 'Click me to perform an action' above it when hovered.

Common Pitfalls

Common mistakes when creating tooltips in React include:

• Not managing the hover state properly, causing the tooltip to flicker or not show.
• Placing the tooltip outside the relative container, which breaks positioning.
• Not using position: relative on the wrapper, so the tooltip cannot position correctly.
• Ignoring accessibility, such as missing aria-label or role attributes.

jsx

/* Wrong: Tooltip outside relative container, no state */
function WrongTooltip({ text, children }) {
  return (
    <>
      {children}
      <div style={{
        position: 'absolute',
        backgroundColor: 'black',
        color: 'white'
      }}>
        {text}
      </div>
    </>
  );
}

/* Right: Tooltip inside relative container with state */
function RightTooltip({ text, children }) {
  const [visible, setVisible] = React.useState(false);
  return (
    <span
      style={{ position: 'relative' }}
      onMouseEnter={() => setVisible(true)}
      onMouseLeave={() => setVisible(false)}
    >
      {children}
      {visible && (
        <div style={{
          position: 'absolute',
          backgroundColor: 'black',
          color: 'white'
        }}>
          {text}
        </div>
      )}
    </span>
  );
}

Quick Reference

Tips for creating tooltips in React:

• Use useState to track hover state.
• Wrap the target element in a container with position: relative.
• Show tooltip with position: absolute inside the container.
• Use onMouseEnter and onMouseLeave to toggle visibility.
• Include accessibility attributes like aria-label and role="tooltip".

Key Takeaways

Use React's useState hook to track when the tooltip should be visible.

Wrap the element with a relative container to position the tooltip absolutely inside it.

Toggle tooltip visibility with onMouseEnter and onMouseLeave events.

Always add accessibility attributes like aria-label and role for better user experience.

Keep tooltip styling simple and ensure it does not block interaction with other elements.