Tooltip

Question

Appears on hover/focus.

Accepted Answer

import './index.css'; import React, { useState } from 'react'; function Tooltip({ text, children }) { const [show, setShow] = useState(false); return ( setShow(true)} onMouseLeave={() => setShow(false)} onFocus={() => setShow(true)} onBlur={() => setShow(false)} tabIndex={0} > {children} {show && ( {text} )} ); } function App() { return (

Tooltip Demo

); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; background: #f5f5f5; } * { box-sizing: border-box; } .tooltip-demo { max-width: 400px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 32px 24px; text-align: center; } .tooltip-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; color: #1f2937; } .tooltip-btn { padding: 0.7rem 1.5rem; font-size: 1.1rem; font-weight: 600; border: none; border-radius: 8px; background: #2563eb; color: #fff; cursor: pointer; transition: background 0.2s; } .tooltip-btn:hover { background: #1d4ed8; } .tooltip-wrapper { position: relative; display: inline-block; outline: none; } .tooltip-bubble { position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 6px 14px; border-radius: 6px; white-space: nowrap; font-size: 1rem; z-index: 10; opacity: 0.95; pointer-events: none; }