工具提示
渲染一个工具提示组件。
- 使用
useState()
钩子创建show
变量,并将其初始化为false
。 - 渲染一个包含工具提示元素和传递给组件的
children
的容器元素。 - 处理
onMouseEnter
和onMouseLeave
方法,通过改变show
变量的值来切换工具提示的className
。
.tooltip-container {
position: relative;
}
.tooltip-box {
position: absolute;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 5px;
border-radius: 5px;
top: calc(100% + 5px);
display: none;
}
.tooltip-box.visible {
display: block;
}
.tooltip-arrow {
position: absolute;
top: -10px;
left: 50%;
border-width: 5px;
border-style: solid;
border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
}
const Tooltip = ({ children, text, ...rest }) => {
const [show, setShow] = React.useState(false);
return (
<div className="tooltip-container">
<div className={show ? 'tooltip-box visible' : 'tooltip-box'}>
{text}
<span className="tooltip-arrow" />
</div>
<div
onMouseEnter={() => setShow(true)}
onMouseLeave={() => setShow(false)}
{...rest}
>
{children}
</div>
</div>
);
};
ReactDOM.createRoot(document.getElementById('root')).render(
<Tooltip text="简单工具提示">
<button>悬停在我上面!</button>
</Tooltip>
);