设置element ui的el-popover的样式需要自定义popper-class：

自定义popper-class="tips-con"，如下：

<template>
        <el-popover width="300" trigger="hover" popper-class="tips-con" title="提示" placement="top-start">
          <div class="operate-btn" slot="reference">
            <el-button size="mini" type="primary">消息提示</el-button>
          </div>
          <span slot="default">
            这是一个详情
          </span>
        </el-popover>
</template>

在当前文件样式中，不加 scoped 写一份：

<style lang="less">
/**写样式要注意，写在不带scoped的 style 里 */
// 修改下面的小三角，属性名根据组件的placement位置做相应修改
.tips-con[x-placement^='left'] .popper__arrow::after {
  border-left-color: #4728d4;
}
.tips-con[x-placement^='right'] .popper__arrow::after {
  border-right-color: #ea4e3d;
}
.tips-con[x-placement^='bottom'] .popper__arrow::after {
  border-bottom-color: #dfea3d;
}
.tips-con[x-placement^='top'] .popper__arrow::after {
  border-top-color: #12dceb;
}
// 修改title的颜色
.tips-con .el-popover__title {
  color: rgb(230, 51, 236);
}
.tips-con {
  background-color: #61dd14;
  color: #fff;
  font-size: 18px;
  padding: 5px;
  border: #e7240a 1px solid;
}
</style>

***el-popover 生成的 div 不在当前组件之内，甚至不在App.vue组件的div内，和App.vue组件的div平级，所以需要全局设置style。 ***

页面效果：