element-ui tooltip文字提示的几种用法

1.官网-基础例子

https://element.eleme.cn/#/zh-CN/component/tooltip
效果图:

代码：

  <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
      <el-button>上左</el-button>
  </el-tooltip>

2.问号提示文字

效果图：
代码：

 <el-tooltip content="提示文字" placement="top" @click.stop.prevent>
     <i class="el-icon-question-solid" />
 </el-tooltip>

3.提示文字很多的情况，需要用插槽

效果图：

代码：

 <el-tooltip placement="top">
     <div slot="content" class="tips-content text-tips-content">
         <span>提示1</span><br>
         <div class="rule-box">
              1、提示内容<br>
              2、提示内容<br>
              3、提示内容
         </div>
     </div>
     <i class="el-icon-question" />
  </el-tooltip>

4.表格的label后面加问号提示文字

效果图：

代码：

 <el-table-column align="center" prop="value" label="Value" min-width="100px">
         <template slot="header" slot-scope="{column}">
          <co-tooltip placement="top">
            <div slot="content" class="tips-content">
              <span>提示文字</span>
            </div>
            <span>{{ column.label }}<i class="co-icon-question" /></span>
          </co-tooltip>
        </template>
 </el-table-column>

5.表格的一个属性

效果图和4一样
代码：

 <co-table-column align="center" prop="value" label="Value" :render-header="renderHeader">
 </co-table-column>

renderHeader(h, { column, $index }) {
        return h('span', [
          h('span', 'Value'),
          h('el-tooltip', { props: {effect: 'dark', placement: 'top' } }, [
            h('div', {slot: 'content', attrs: {style: 'font-size: 13px; width: 500px; word-wrap:break-word; line-height: 24px'}},
              '提示文字1' +
              '文字2' +
              '文字3'),
            h('i', { class: 'el-icon-question' })
          ])
        ])
    }