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')
);
热门推荐
10 祝孙辈生日祝福语简短
11 恋人跨年祝福语大全简短
12 考大学敬酒简短祝福语
13 开工投产大吉祝福语 简短
14 偶然结婚祝福语朋友简短
15 感谢学长学姐祝福语简短
16 戏精的祝福语简短
17 我要结婚祝福语简短
18 婚前女儿生日祝福语简短