关于Element的el-popover使用问题

正常使用

          <el-popover ref="popover" popper-class="wrap" effect="dark" placement="bottom-start" title="当日晚间更新，入选条件（机选）"
            trigger="hover"> </el-popover>
          <img class="tip" src="../../static/images/icon/4.png" alt="" v-popover:popover>

 

配合表格组件使用

<el-table :data="tableData" style="width: 100%">
  <el-table-column align="center" prop="gn" label="文字" width="190">
    <template slot-scope="scope">
      <el-popover effect="dark" placement="top-start" :title="scope.row.gn" trigger="hover">
        <span class="color2" slot="reference">{{scope.row.gn|ellipsis}}</span>
  </el-popover>
    </template>
  </el-table-column>
</el-table>

 

样式修改

.wrap {
  /* 背景色 */
  max-width: 230px;
  padding: 10px !important;
  font-size: 14px !important;
  background: #03204e !important;
  border: 1px solid rgba(3, 56, 106, 0.75) !important;
}
/* 下方是去除三角箭头的代码 */
.wrap[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: rgba(3, 56, 106, 0.75) !important;
}

.wrap[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: rgba(3, 56, 106, 0.75) !important;
}

// 悬浮提示组件
.el-popover {
  padding: 10px !important;
  font-size: 14px !important;
  border: none !important;
  background-color: rgba(3, 56, 106, 0.75) !important;
}
.el-popper[x-placement^="top"] .popper__arrow::after {
  border-top-color: rgba(3, 56, 106, 0.75) !important;
}

.el-popover__title {
  color: #fff;
  font-family: "微软雅黑";
  font-size: 14px !important;
  margin-bottom: 0 !important;
}