https://segmentfault.com/a/1190000021296111
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <style> .el-tooltip__popper[x-placement^=bottom] .popper__arrow{ border-bottom-color: red; } .el-tooltip__popper[x-placement^=bottom] .popper__arrow:after { border-bottom-color: red; } .test{ background: red !important; } </style> <body> <div id="app"> <el-tooltip content="Top center" placement="bottom" popper-class="test"> <el-button>Dark</el-button> </el-tooltip> </div> </body> <!-- import Vue before Element --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- import JavaScript --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: function() { return { visible: false } } }) </script> </html>