elementUI中改变el-tooltip箭头颜色或者隐藏

有些需求中使用eltooltip完成,但是需要去除箭头符号,研究了之后找到了方法,就是感觉有点笨

1.首先只需要改变颜色的话,我这里都设置的透明色,用的话直接粘贴把所有透明色改成需要设置的颜色就可以啦

.popper__arrow{
  background-color: transparent !important;
}

.el-popper[x-placement^='bottom'] .popper__arrow:after {                           
  margin-left: -6px;
  border-bottom-color: transparent !important;
  border-top-width: 0;
}

.el-popper[x-placement^='top'] .popper__arrow:after{
  margin-left: -6px;
  border-top-color: transparent !important;
  border-bottom-width: 0;
}

.el-tooltip__popper.is-light[x-placement^='bottom'] .popper__arrow:after{
  margin-left: -6px;
  border-bottom-color: transparent !important;
  border-top-width: 0;
}

.el-tooltip__popper.is-light[x-placement^='top'] .popper__arrow:after{
  margin-left: -6px;
  border-top-color: transparent !important;
  border-bottom-width: 0;
}

2.如果需要隐藏掉箭头的话,我把样式设置成display:none,但是没有生效,应该是没找对根元素,实在找不到了,我就把下面的框设置了相对定位,加上层级之后,就可以盖住箭头,非常完美

//这个是整体的样式,popper不设置背景色,上面展示内容设置背景色,这样就会盖住下面,不会看出来问题
.el-tooltip__popper{
  // width: 90px;
  padding: 0;
  line-height: 35px;
  text-align: center;
  cursor: pointer;
  border-radius: 0;

  .exportButton{
    height: 30px;
    // width: 90px;
    padding: 0 18px;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    @include themedColor('border', 'modal-border');
    @include themedColor('color', 'font-color');
    @include themedColor('background-color', 'primary-background-color');
  }
  
}
//设置定位盖住箭头
.el-tooltip__popper.is-light{
  @include themedColor('background-color', 'primary-background-color');

  .tips{
    position: relative;
    z-index: 1;
    margin-top: -10px;
  }
}

效果就是这样啦

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-tooltip 箭头的黑边是由于默认样式的设定所致。根据引用的描述,可以通过自定义样式来解决这个问题。 解决办法是在你的样式表,找到 `popper-class` 这个类,并对其进行修改。根据你的需求,你可以设置 `border-color` 的颜色值为你想要的颜色,如图的浅灰色。同时,为了保证箭头和边框颜色一致,你还需要注意红框处的样式也要保持一致。 需要注意的是,具体的方向(如 `right`)要根据你的 `el-tooltip` 组件所指向的方向进行设置,具体的方向可参考 `element-ui` 的文档。 此外,根据引用的描述,你还可以通过修改 `.el-tooltip__trigger:focus-visible` 这个类的样式,将 `outline` 设置为 `unset` 或 `none`,以取消焦点时的边框样式。 总结起来,解决 el-tooltip 箭头黑边的问题,你需要按照以下步骤进行操作: 1. 在你的样式表找到 `popper-class` 类,并设置 `border-color` 的颜色值为你想要的颜色,保持和箭头一致。 2. 注意保持红框处的样式也一致,确保箭头和边框颜色一致。 3. 根据你的 `el-tooltip` 组件的方向,设置对应的方向样式,如 `right`、`left`等。 4. 如果需要,可以取消焦点时的边框样式,通过修改 `.el-tooltip__trigger:focus-visible` 类的样式,将 `outline` 设置为 `unset` 或 `none`。 请注意,以上样式的修改需要在 `APP.vue` 文件进行,组件内部对样式的修改不会生效。希望这些步骤可以帮助你解决 el-tooltip 箭头黑边的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值