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

组件官方文档：

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

需求：

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

修改方法：

添加自定义类名

popper-class="test"

<el-tooltip content="Top center" placement="right" popper-class="test">
      <el-button>Dark</el-button>
    </el-tooltip>

添加样式

<style>
    .el-tooltip__popper[x-placement^=right] .popper__arrow{
      border-right-color: #1ab394;
    }
    .el-tooltip__popper[x-placement^=right] .popper__arrow:after {
      border-right-color: #1ab394;
    }
    .test{
      background: #1ab394 !important;
    }
  </style>

 .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 

在线示例：

点击查看在线示例

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

微信

 

支付宝