@beisen/tool-tip

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>