el-tooltip或el-popover 提示框改变颜色

html查看

• tooltip:

<div role="tooltip" id="el-tooltip-7368" 
    aria-hidden="true" class="el-tooltip__popper is-light" 
    style="transform-origin: center top; z-index: 2071; display: none;">
    Bottom center
    <div x-arrow="" class="popper__arrow" style="left: 43px;"></div>
</div>

• popover:

<div role="tooltip" id="el-popover-9603" 
    aria-hidden="false" class="el-popover el-popper el-popover--plain" 
    tabindex="0" style="width: 200px; position: absolute; top: 392px; left: 749px; transform-origin: center top; z-index: 2099;" 
    x-placement="bottom">
    <div class="el-popover__title">标题</div>
    这是一段内容,这是一段内容,这是一段内容,这是一段内容。
    <div x-arrow="" class="popper__arrow" style="left: 113.5px;"></div>
</div>

主要区别就是 class不同，其他基本都一样，箭头的实现方式也一样。
直接分析 官网 popover 的颜色改变。

html结构

可知，其中由 内容框+箭头 来组成提示框。

改变背景颜色

1. 内容框

   
   

2. 箭头

   
   
   
   

值得说明的是，这个箭头是利用边框的大小实现的。
一开始是真不知道，这个箭头是怎么实现的，后来调大参数才理解。