el-tooltip 自定义样式

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>

 

posted @ 2021-01-17 15:07  ThisCall  阅读(3375)  评论(0)  编辑  收藏  举报