# @beisen-platform/tool-tip

> 平台tip组件

Latest version **1.0.5** (published 2019-09-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-platform/tool-tip
pnpm add @beisen-platform/tool-tip
yarn add @beisen-platform/tool-tip
bun add @beisen-platform/tool-tip
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2019-09-17 |
| First published | 2018-11-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 41.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | beisen |
| Maintainers | beisencorp |
| Keywords | beisen, react-component, es6, tooltip |

## Links

- npm: https://www.npmjs.com/package/@beisen-platform/tool-tip
- Repository: http://gitlab.beisencorp.com/ux-cnpm/ux-tool-tip
- npm.io page: https://npm.io/package/@beisen-platform/tool-tip

## Dependencies (1)

- [@beisen-platform/common-func](https://npm.io/package/@beisen-platform/common-func.md)

## Recent versions

- 1.0.5 (latest) — 2019-09-17
- 1.0.3 — 2019-09-03
- 1.0.2-rc.4 — 2019-07-16
- 1.0.2-rc.3 — 2019-06-19
- 1.0.2-rc.2 — 2019-04-29
- 1.0.2-rc.1 — 2019-04-22
- 1.0.2 — 2019-03-15
- 1.0.1 — 2019-03-15
- 1.0.0 — 2019-01-29
- 0.2.1 — 2018-11-28

## 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.传入参数     
该参数为上述参数，传入方式使用: {...参数}  
```javascript
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>
         ) 
    }
}  
```  
```javascript
    <ToolTip title='提示内容'> 
      <a href="#">内容热区</a>
    </ToolTip>
```

```javascript
    <ToolTip title={data} side={true}> 
      <span>内容热区<span>  //左右自适应显示
    <ToolTip>
```  

```javascript
    <ToolTip title={v.text}> 
      <img href="#">内容热区 />
    </ToolTip>
```

---
_Source: https://npm.io/package/@beisen-platform/tool-tip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._