Create a UI where hovering over a specific text displays a tooltip.
The tooltip content is very long, so the tooltip box should have a fixed maximum height and show a vertical scrollbar if the content overflows.
Users must be able to scroll inside the tooltip to read all the content.
Design the tooltip with a clean and modern style using React (TSX) and Tailwind CSS.
Make sure to set a max-height and enable overflow-y: auto for the tooltip content.
I'll create a tooltip component that appears when hovering over text, with scrollable content for long text. Here's a complete implementation:
The tooltip component I've created has the following features:
- Scrollable Content: The tooltip has a fixed maximum height (default 150px) and shows a scrollbar when content overflows.
Smart Positioning:
- The tooltip automatically positions itself relative to the hovered text
- It uses
useLayoutEffectto measure and position the tooltip correctly before the browser paints 1 - It adjusts if the tooltip would go off-screen
Styling:
- Clean, modern design with Tailwind CSS
- Smooth transitions for a polished feel
- Border and shadow for depth
- Dark mode support
Accessibility:
- Uses appropriate ARIA attributes
- Provides visual cues with dotted underline
- Cursor changes to "help" on hover
Flexibility:
- Supports different positions (top, bottom, left, right)
- Customizable max height
- Accepts any React node as content
To use the tooltip, simply wrap your text with the Tooltip component and provide the content you want to display.
