Vue3element text prompt tooltip background and arrow color change

Tooltip background and arrow color change based on vue3+element-plus

I met the need to change the tooltip background and arrow color,

but after checking some articles, the method is basically based on element-ui , which is not applicable to element-plus, so write a blog to record the modification method

element-ui

vue2+element-uiThe modification method is as follows.
First set the tooltip class="tooltip-style"and then change the style according to effect="light"or according to the code. The code is as followseffect="dark"

It should be noted that do not write in the scope

tooltip-style.el-tooltip__popper {
    
    
      background: red;
    }
    
// 如果是light，就改成is-light
tooltip-style.el-tooltip__popper.is-dark {
    
    
      background: red;
    }
    
// 修改箭头
 .el-tooltip__popper[x-placement^=“方向”] .popper__arrow:after{
    
    
		border-方向-color:样式
}
 .el-tooltip__popper[x-placement^=“方向”] .popper__arrow{
    
    
		border-方向-color:样式
}

element-plus

The modification method of element-plus is quite simple. You can modify the theme effectby

For example, if we want to modify the background color of tooltip, we only need to change the style of the class provided in the document.

.el-popper.is-customized {
    
    
  /* Set padding to ensure the height is 32px */
	background: pink;
}

.el-popper.is-customized .el-popper__arrow::before {
    
    
	background: pink;
}

Finally, I remind you again that don't write it scopein ! ! !