自定义el-tooltip背景和小三角的颜色

最新推荐文章于 2024-03-05 11:28:22 发布

chengchong_cc

最新推荐文章于 2024-03-05 11:28:22 发布

阅读量1k

点赞数

分类专栏： element ui vue 文章标签： vue

本文链接：https://blog.csdn.net/chengchong_cc/article/details/129836513

版权

vue 同时被 2 个专栏收录

89 篇文章 0 订阅

订阅专栏

element ui

50 篇文章 0 订阅

订阅专栏

/* 修改tooltip的right弹出的箭头 有两层一个是:after
    设置颜色需要将其中一个transparent设置透明掉，不然重叠在一起颜色不对
    其他位置则把right改成自己选择弹出的位置
*/
.tipclass[x-placement^="top"] .popper__arrow {
  border-top-color: #28B3F9 !important;
}
.tipclass[x-placement^="top"] .popper__arrow:after {
  border-top-color:#28B3F9 !important;
}

.tipclass-buttom[x-placement^="top"] .popper__arrow {
  border-top-color: #28B3F9 !important;
}
.tipclass-buttom[x-placement^="top"] .popper__arrow:after {
  border-top-color:#28B3F9 !important;
}

.tipclass{
  background: linear-gradient(180deg, rgba(19,64,115,0.93) 0%, rgba(8,30,63,0.93) 100%) !important;
  box-shadow: 0px 2px 14px 2px #082A52;
  border-radius: 2px;
  border: 1px solid;
  border-image: linear-gradient(180deg, rgba(28, 183, 255, 1), rgba(12, 129, 255, 1)) 1 1;
  backdrop-filter: blur(10px);
}

.tipclass-buttom{
  background: linear-gradient(180deg, rgba(19,64,115,0.93) 0%, rgba(8,30,63,0.93) 100%) !important;
  box-shadow: 0px 2px 14px 2px #082A52;
  border-radius: 2px;
  border: 1px solid;
  border-image: linear-gradient(180deg, rgba(28, 183, 255, 1), rgba(12, 129, 255, 1)) 1 1;
  backdrop-filter: blur(10px);
  color: #FFFFFF;
}