@beisen/tool-tip

### 功能

Stats

StarsIssuesVersionUpdatedCreatedSize
@beisen/tool-tip
0.1.1022 years ago5 years agoMinified + gzip package size for @beisen/tool-tip in KB

Readme

ToolTip使用说明

功能

用于文字提示

使用说明

tip默认向上显示,当向上显示不下时,会向下显示  

使用方法

1. 将组件包裹在需要有提示信息的元素的外部,每个组件内部只能有一个元素
2. 适用于行内元素 如input、button、a和有span包裹的文字等  
3. 一般情况下只需要设置title值即可
4. 可以传简易的html标签  

项目运行、打包

* `cnpm install` 或 `npm install`
* `npm run dev` (开发环境打包 port:8080)
* `npm run build` (生产环境打包)  

使用参数

  • title : 提示内容 //需要提示的内容文字,必须是字符串

  • hidden: 组件是否隐藏 可选参数 :true,false 默认不隐藏, 可不设置

  • side :组件是否左右显示 可选参数 true ,false 默认为false 可不设置,一般情况下均为false

  • alwaysShowTips: 总是显示tooltip,默认为false,该参数和组件显示特性有关(该组件只有当包裹文字宽度大于外部宽度,即出现...这种显示不全的情况下才会显示tooltip)

  • htmlTag: 数组格式,['<center>', '<a>'] 为防止xss攻击,自定义允许渲染的html标签,组件内默认为 <span>,<p>,</br>,<br/> 凡是含有其他标签的字符串,均不会处理为html

  • tipsPosition: 'bottom' 目前仅支持bottom参数,当设置该参数为bottom时,tips会向下显示, 默认为自适应判断

  • tipsReason: "功能说明" 如果有该参数,未打点情况下会优先显示该参数,打点情况下会显示两行说明,如下显示

  • 名称

  • B: 说明

  • tipsDes: "功能描述", 自定义前置描述 B

ToolTip组件调用方法

1.安装npm组件包

npm install @beisen/tool-tip --save-dev  

2.引用组件

import ToolTip from "src/index"  

3.传入参数
该参数为上述参数,传入方式使用: {...参数}

export default class TestToolTip extends React.Component {
    constructor(props){
        super(props)
    }
    render() {
        let data = {
            title: '提示内容',
            hidden: false,
            side: true,
            alwaysShowTips: true,
            tipsPosition: 'buttom',
            htmlTag: ["<span>"], //组件内默认为 <span>,<p>,</br>,<br/>凡是含有其他标签的字符串,均不会处理为html
            tipsReason: 'reason',
            tipsDes: "des" 
        }
        return(
            <div> 
                <ToolTip {...data}> 
                    <input />
                </ToolTip>
            </div>
         ) 
    }
}  
    <ToolTip title='提示内容'> 
      <a href="#">内容热区</a>
    </ToolTip>
    <ToolTip title={data} side={true}> 
      <span>内容热区<span>  //左右自适应显示
    <ToolTip>
    <ToolTip title={v.text}> 
      <img href="#">内容热区 />
    </ToolTip>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.