element ui Tooltip 文本与箭头颜色修改

最新推荐文章于 2024-01-31 17:42:20 发布

who_become_gods

最新推荐文章于 2024-01-31 17:42:20 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.youkuaiyun.com/who_become_gods/article/details/109028527

版权

本文详细介绍了如何在 Element UI 中自定义 Tooltip 的文本颜色和箭头颜色，包括修改 CSS 样式的方法，帮助开发者实现组件样式个性化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//黑色主题文本框样式修改
.el-tooltip__popper.is-dark{
  background: rgb(7, 44, 76, 0.8) !important;
}

//箭头颜色修改
.el-tooltip__popper .popper__arrow {
  border-width: 6px;
  border-color: rgb(7, 44, 76, 0.8);
}
//上箭头
.el-tooltip__popper[x-placement^=top] .popper__arrow:after {
  border-top-color: #395670 !important;
}
//下箭头
.el-tooltip__popper[x-placement^=bottom] .popper__arrow:after {
  border-bottom-color: #395670 !important;
}
//右箭头
.el-tooltip__popper[x-placement^=right] .popper__arrow:after {
  border-right-color: #395670 !important;
}
//左箭头
.el-tooltip__popper[x-placement^=left] .popper__arrow:after {
  border-left-color: #395670 !important;
}