element Tooltip 提示元件修改背景顏色 箭頭顏色
阿新 • • 發佈:2019-02-17
元件官方文件:
需求:
官方只給了兩套主題顏色,無法滿足某些需求。
修改方法:
新增自定義類名
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