# 文字提示
> 用于表格的文字提示

## 导入使用
```code[javascript]
import SuSpanTip from "ss-universal-client-web/comp/widget/su-span-tip";
```

### 基础用法
> 简单的步骤条。
   

:::demo 
```html
<template>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
            prop="date"
            label="日期"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            width="150"
            label="地址">
            <template slot-scope="scope">
                <su-span-tip
                    v-if="scope.row.slot"
                    :content="scope.row.address"
                    :placement="placement"
                    :clampLine="2">
                    <el-button>slot</el-button>
                    地址地址地址地址地址地址地址地址地址地址地址地址地址
                </su-span-tip>
                <su-span-tip
                    v-else-if="scope.row.clampLine"
                    :content="scope.row.address"
                    :placement="placement"
                    :clampLine="1">
                </su-span-tip>
                <su-span-tip
                    v-else
                    :content="scope.row.address"
                    :placement="placement"
                    :contentLength="10">
                </su-span-tip>
            </template>
        </el-table-column>
    </el-table>
</template>
<script>

export default {
    components: {
        seSpanTip
    },
    data() {
        return {
            placement: 'top',
            tableData: [{
                slot: true,
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路1518弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路1517弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路1519弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金'
            }, {
                clampLine: true,
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金'
            }]

        }
    }
};
</script>

```
:::

### Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| content       | 显示的内容 |String  | -	 | - |
| placement         | 显示的位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| contentLength        | 显示的长度，不传则clampLine生效  |Number | - | 0 |
| clampLine        | 显示的行数  |Number | 1,2,3 | 1 |