如何修改element-ui的el-tooltip(文字提示弹出框)的箭头颜色呢?

起因:因为不满意默认的样式,默认的有两种effect: dark 和 light。需要自定义一下的时候,我就想设置背景色的边框的颜色,这二者用popper-class即可设置,但是会发现箭头尖尖的部分是不受影响的。

问题截图:

可以看见,我给边框设置的是图中的那种浅灰色,但是不会影响到箭头的颜色的。

解决办法:

 

修改完成的效果:

 

像图中那样设置即可,注意,红框处均得保持一致。

⚠️注意:

1.我这里是right,具体是什么方向你要根据自己的el-tooltip是朝向什么方向的,这个你可以看element-ui的文档。

2.本文的所涉及到的样式均需在APP.vue中修改才能生效,组件内部不生效

猜你喜欢

转载自blog.csdn.net/qq_41083105/article/details/122722397