README
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内容的功能,下一个版本迭代加上