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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM