element ui 在表格中自定义tooltip

用element ui 表格做的看板，第一列表头是一个时间选择器，筛选整个看板的的时间，第一列的内容是当前行的名字，剩下的列是看板内容，指上去要有tootip提示并且提示内容有背景颜色，和第一列常规的tootip不同

第一列表头时间选择器代码：

 <el-table-column width="200" align="left" :show-overflow-tooltip="true" prop="accName" >   
        <template slot="header" slot-scope="scope" class="datePicker">
          <el-button icon="el-icon-arrow-left" @click="changeDatePicker('-1')"></el-button>
            <el-date-picker
            size="small"
            v-model="searchFormField.appointmentDate"
            type="date"
            value-format="yyyy-MM-dd"
            @change="changeDate(scope)"
              style="width: 90%;"
              placeholder="选择日期"
              :clearable="false"
      >
    </el-date-picker>
    <el-button icon="el-icon-arrow-right" @click="changeDatePicker('+1')"></el-button>
      </template>
      <template  slot-scope="scope">
        <span>{{scope.row.accName}}</span>
      </template>
      </el-table-column>

注意，scope必须写上

看板提示框代码：

<el-table-column label="00:00"  min-width="60" align="center" >
      <template slot-scope="scope" >
           <el-tooltip placement="top" popper-class="atooltip" v-if="scope.row.typeList[0].type!==0">
            <div slot="content">申请人：{{scope.row.typeList[0].createName}} <br/>二级单位：{{scope.row.deptName}}<br/>申请日期：{{scope.row.typeList[0].createTime}}<br/>申请期限：{{scope.row.typeList[0].startTime}}至{{scope.row.typeList[0].endTime}}  {{computeTime(scope.row.typeList[0].startTime,scope.row.typeList[0].endTime)}}小时 </div>
              <div  class="leftBorder" :class="scope.row.typeList[0].type==0?'kongxian':(scope.row.typeList[0].type==1?'applying':'hasBook')"></div> 
        </el-tooltip>
         <div  v-if ="scope.row.typeList[0].type==0" class="leftBorder" :class="scope.row.typeList[0].type==0?'kongxian':(scope.row.typeList[0].type==1?'applying':'hasBook')"></div>  
          <el-tooltip placement="top" popper-class="atooltip" v-if="scope.row.typeList[1].type!==0">
            <div slot="content">申请人：{{scope.row.typeList[1].createName}} <br/>二级单位：{{scope.row.deptName}}<br/>申请日期：{{scope.row.typeList[1].createTime}}<br/>申请期限：{{scope.row.typeList[1].startTime}}至{{scope.row.typeList[1].endTime}}  {{computeTime(scope.row.typeList[1].startTime,scope.row.typeList[1].endTime)}}小时 </div>
             <div class="rightBorder" :class="scope.row.typeList[1].type==0?'kongxian':(scope.row.typeList[1].type==1?'applying':'hasBook')"></div> 
        </el-tooltip> 
        <div  v-if ="scope.row.typeList[1].type==0"  class="rightBorder" :class="scope.row.typeList[1].type==0?'kongxian':(scope.row.typeList[1].type==1?'applying':'hasBook')"></div> 
      </template>
       </el-table-column>

 popper-class="atooltip"

是tootip个性化样式class名