文字提示（tooltip）

源码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.cloneElement(child, {
        className,
        children: [...children,
          
{title}
        ]})}
    
  )
}

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);    
  }
}

调用

 
      YES
 

效果.jpg