react tooltip
npm install x-react-tooltip
npm install --save-dev x-react-tooltip
`
使用
`
import {Tooltip} from 'x-react-tooltip'
`
`html
头部内容
需要hover展现的内容
`
参数
- 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
``