有些需求中使用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;
}
}
效果就是这样啦