lxlukas / react-tooltip

基于react的tooltip组件

x-react-tooltip组件

简介

x-react-tooltip组件是基于react封装的，用于所有需要tooltip场景的使用

特点：

• 可以进行简单的tooltip使用
• header和body彻底分离，可以高度定制化，可以任意放入任何内容

安装

npm install --save-dev x-react-tooltip

使用

import {Tooltip} from 'x-react-tooltip'

<Tooltip position="right">
    <Tooltip.Header>头部内容</Tooltip.Header>
    <Tooltip.Body>
        <div>需要hover展现的内容</div>
    </Tooltip.Body>
</Tooltip>

参数

• Tooltip

参数	类型	值	含义
className	string	无默认值	样式class
position	string	'top','bottom','right','left'四个值中的一个，默认为'bottom'	tooltip内容展现的位置
style	object	无默认值	行内样式
disabled	bool	默认为false	是否禁用
arrow	bool	默认为true	是否展示箭头
distance	number	默认为15px	表示header与body之间的距离(单位:px)
onMouseIn	function	无默认值	tooltip鼠标移入时的callback
onMouseOut	function	无默认值	tooltip鼠标移出时的callback

• Tooltip.Header

参数	类型	值	含义
style	object	无默认值	行内样式

• Tooltip.Body

参数	类型	值	含义
style	object	无默认值	行内样式

开发

npm start

项目启动后直接访问 localhost:9001 即可看到展示页面

打包发布

npm run build

npm publish

版本信息

• v1.0.10

  功能：

  1.tooltip基本功能

  缺陷

  1.没有加上页面滚动后，自动重新定位body内容的功能，下一个版本迭代加上