element Tooltip 提示组件修改背景颜色 箭头颜色

组件官方文档：

http://element-cn.eleme.io/#/zh-CN/component/tooltip

需求：

官方只给了两套主题颜色，无法满足某些需求。

修改方法：

添加自定义类名

popper-class="test"

      Dark
    

添加样式

 .test 类名：控制主体背景颜色

.el-tooltip__popper[x-placement^=right] .popper__arrow 和 .el-tooltip__popper[x-placement^=right] .popper__arrow:after 

控制箭头的颜色 

 注意：三个类名的颜色值最好相同

特殊说明：

本示例的代码是修改右侧方向的颜色值，

如需修改其他方向提示文字背景颜色，请修改

x-placement^=right

border-right-color: #1ab394;

中的对应方向值 参考如下：

top

top-start

top-end

bottom

bottom-start

bottom-end

left

left-start

left-end

right

right-start

right-end 

在线示例：

点击查看在线示例

如果我的文章对您有帮助，微信或支付宝打赏：

微信

 

支付宝