The effect is as follows: when hovering over the input, it will be displayed as follows
<template>
<el-popover
placement="top"
width="200"
trigger="hover"
popper-class="monitor-yt-popover"
>
<span>规则:{
{ config.unitId }}</span>
<el-input
v-model="config.unitId"
slot="reference"
type="text"
@blur="
getUnitScoreVal()
"
></el-input>
</el-popover>
</template>
The style is as follows: Note that it cannot be written in the scoped style tag, the correctness is as follows
<style>
.el-popover.monitor-yt-popover {
background-color: #fbfbfb;
border-color: #f56c6c;
color: #f56c6c;
}
.monitor-yt-popover .popper__arrow::after {
border-top-color: #f56c6c !important;
}
</style>