React ::工具提示
呈现工具提示组件。
使用 挂钩创建 变量并将其初始化为 。返回 包含的元素，该 元素 将成为工具提示并 传递给组件。 通过更改 变量的值来处理 和 方法 。React.useState()showfalse
childrenonMouseEnteronMouseLeaveshow
.tooltip {
position: relative;
background: rgba(0, 0, 0, 0.7);
color: white;
visibility: hidden;
padding: 5px;
border-radius: 5px;
}
.tooltip-arrow {
position: absolute;
top: 100%;
left: 50%;
border-width: 5px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.7) transparent transparent;
}function Tooltip({ children, text, ...rest }) {
const [show, setShow] = React.useState(false);
return (
{text}
setShow(true)}
onMouseLeave={() => setShow(false)}
>
{children}
);
} ReactDOM.render(
,
document.getElementById('root')
);