theme.vue 684 B

12345678910111213141516171819202122232425
  1. <template>
  2. <el-tooltip content="Top center" placement="top">
  3. <el-button>Dark</el-button>
  4. </el-tooltip>
  5. <el-tooltip content="Bottom center" placement="bottom" effect="light">
  6. <el-button>Light</el-button>
  7. </el-tooltip>
  8. <el-tooltip content="Bottom center" effect="customized">
  9. <el-button>Customized theme</el-button>
  10. </el-tooltip>
  11. </template>
  12. <style>
  13. .el-popper.is-customized {
  14. /* Set padding to ensure the height is 32px */
  15. padding: 6px 12px;
  16. background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
  17. }
  18. .el-popper.is-customized .el-popper__arrow::before {
  19. background: linear-gradient(45deg, #b2e68d, #bce689);
  20. right: 0;
  21. }
  22. </style>