How to modify the arrow color of element-ui's el-tooltip (text prompt pop-up box)?

Cause: Because you are not satisfied with the default style, there are two default effects: dark and light. When I need to customize it, I want to set the color of the border of the background color. The two can be set with popper-class, but you will find that the pointed part of the arrow is not affected.

Screenshot of the problem:

As you can see, what I set for the border is the light gray in the picture, but it will not affect the color of the arrow.

Solution:

 

The modified effect:

 

Just set it as shown in the picture. Note that the red boxes must be consistent.

⚠️Note:

1. I am right here. The specific direction depends on the direction your el-tooltip is facing. You can refer to the element-ui document for this.

2. The styles involved in this article needto be modified in APP.vue to take effect, and will not take effect inside the component

Guess you like

Origin blog.csdn.net/qq_41083105/article/details/122722397