首页关于element-plus中，多选下拉框开启collapse-tags-tooltip后折叠选项悬浮框以及tag样式的设置，最好是利用popper-class这个属性

关于element-plus中，多选下拉框开启collapse-tags-tooltip后折叠选项悬浮框以及tag样式的设置，最好是利用popper-class这个属性

时间: 2025-06-14 09:17:19 浏览: 8

在Element Plus中，如果你想自定义多选下拉框的折叠选项悬浮框（通常称为tooltip）和标签样式，特别是当启用`collapse-tags-tooltip`时，可以利用`popper-class`这个属性。`popper-class`允许你在Popper.js插件中添加自定义CSS类，这将影响到 tooltip 的外观和位置。首先，确保在你的Vue组件的`el-select`元素上设置了`collapse-tags-tooltip`： ```html <template> <el-select v-model="selectedOptions" popper-class="custom-popover-class" collapse-tags-tooltip >  </el-select> </template> <style scoped> .custom-popover-class { /* 自定义你的 tooltip 样式 */ position: relative; & .el-select__tags { /* 标签样式 */ /* ... */ } & .el-tooltip__inner { /* tooltip 内部内容样式 */ /* ... */ } & .el-tooltip--top { /* 如果你想改变默认的tooltip位置，针对顶部定位的样式 */ top: your-custom-top-offset; } & .el-tooltip--bottom { /* 类似的，你可以对底部位置的tooltip进行定制 */ bottom: your-custom-bottom-offset; } </style> ``` 在这里，你可以根据需要修改`.custom-popover-class`下的样式，比如更改颜色、字体大小、位置偏移等。对于每个tag，你可以在`.el-select__tags`选择器中调整样式。注意，`popper-class`应该放在组件的模板里，`custom-popover-class`则是你想要应用的CSS类名，可以根据实际需求调整。

阅读全文