源码js文件
import React, { Children } from 'react'
import PropTypes from 'prop-types'
import './index.scss'
const ToolTip = ({ title, children, ...props }) => {
const child = Children.only(children)
const className = `${child.props.className || ''} pure-tooltip`.trim()
return (
<React.Fragment>
{React.cloneElement(child, {
className,
children: [...children,
<div className="pure-tooltip-tip" key={child.props.key || 'x'}>{title}</div>
]})}
</React.Fragment>
)
}
ToolTip.propTypes = {
title: PropTypes.node,
children: PropTypes.node.isRequired,
}
export default ToolTip
scss样式
@import '../vars.scss';
.pure-tooltip {
cursor: pointer;
position: relative;
&:hover .pure-tooltip-tip {
display: block;
}
.pure-tooltip-tip {
display: none;
background: rgba(0,0,0,.9);
word-wrap: break-word;
word-break: keep-all;
pointer-events: none;
z-index: $tooltip-z;
color: #fff;
max-width: 300px;
padding: 2px 5px;
font-size: 12px;
border-radius: 4px;
position: absolute;
top: -20px;
left: 0;
cursor: none;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
}
调用
<ToolTip title="文字提示信息">
<span className="xxx">YES</span>
</ToolTip>
效果.jpg
