element-plus/docs/examples/tooltip/theme.vue
2022-01-31 22:59:06 +08:00

26 lines
684 B
Vue

<template>
<el-tooltip content="Top center" placement="top">
<el-button>Dark</el-button>
</el-tooltip>
<el-tooltip content="Bottom center" placement="bottom" effect="light">
<el-button>Light</el-button>
</el-tooltip>
<el-tooltip content="Bottom center" effect="customized">
<el-button>Customized theme</el-button>
</el-tooltip>
</template>
<style>
.el-popper.is-customized {
/* Set padding to ensure the height is 32px */
padding: 6px 12px;
background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}
.el-popper.is-customized .el-popper__arrow::before {
background: linear-gradient(45deg, #b2e68d, #bce689);
right: 0;
}
</style>