如下代碼中，無論如何修改el-tooltip的樣式，都不能生效
<el-tooltip placement="top" effect="dark" :content="content">
<div>{{ content}}</div>
</el-tooltip>
:deep(.el-popper),
:deep(.el-popper[data-popper-placement^="top"] .el-popper__arrow::before) {
background-color: $daping-background-color !important;
}
:deep(.el-popper) {
width: 31.875rem !important;
}原因如下：
? ? ? ? element-plus中，tl-tooltip的dom結(jié)構(gòu)默認是被追加在body下的，故在app結(jié)構(gòu)下的樣式修改是不生效的；具體解決方法如下：
方法一：
<el-tooltip :teleported="false" placement="top" effect="dark" :content="content">
<div>{{ content}}</div>
</el-tooltip>
<style lang="scss" scoped>
:deep(.el-popper),
:deep(.el-popper[data-popper-placement^="top"] .el-popper__arrow::before) {
background-color: #fff !important;
}
:deep(.el-popper) {
width: 31.875rem !important;
}
</style>
將“teleported”屬性設(shè)置為false，這樣，默認則會不被追加到 append-to 的位置，此時修改樣式即會生效
方法二：文章來源：http://www.zghlxwxcb.cn/news/detail-545390.html
????????默認追加到body下的，但是此時可以使用popper-class屬性為el-tooltip添加類名【為了不影響其他的tooltip樣式，類名最好是唯一的】，然后，再另外寫一個style結(jié)構(gòu)，其中，一定不要添加scoped屬性，最后即可隨意修改el-tooltip的樣式，具體代碼如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-545390.html
<el-tooltip placement="top" effect="dark" :content="content" popper-class="my-tooltip">
<div>{{ content}}</div>
</el-tooltip>
// 此處一定不要加scoped，另外，為了不影響其他地方的tooltip樣式，此處的class命名一定要唯一
<style lang="scss">
.my-tooltip {
background-color:#fff !important;
width: 31.875rem !important;
z-index: 10000 !important;
}
</style>到了這里，關(guān)于vue3中el-tooltip的樣式修改不生效的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
