jquery 2023-09-29 09:00

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

前往下载

版权声明：

1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。
2、网站不提供资料下载，如需下载请到原作者页面进行下载。

分享到：