el-tooltip 如何修改样式

最新推荐文章于 2025-03-18 20:59:11 发布

coderhhan

最新推荐文章于 2025-03-18 20:59:11 发布

阅读量1.6w

点赞数 8

文章标签： vue

本文链接：https://blog.csdn.net/coderhhan/article/details/109220682

版权

本文详细介绍了如何使用popper-class属性为el-tooltip创建选择器，并展示了如何通过LESS样式修改箭头和内容样式。重点在于如何在非 scoped 样式中实现自定义效果，附带了示例代码和最终展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-tooltip 如何修改样式
el-tooltip标签又popper-class="testtooltip"属性可以给组件建一个选择器名。通过atooltip可以直接修改el-tooltip.

<el-tooltip  
placement="bottom" 
popper-class="testtooltip">
  	<div slot="content">
  	    ceshi  
  	 </div>
	<el-button>Dark</el-button>
</el-tooltip>

不过要注意，写的样式不能写在scoped样式标签里。需要重新写一个样式标签单独放。

<style lang="less">
 箭头
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {   
	border-bottom-color: white!important;
}
箭头
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {  
	border-bottom-color: white !important;
}
内容
.testtooltip{  
	background: white !important;  
	box-shadow: 1px 1px 10px 3px #D3D3D6;
}
</style>

效果图如下
在这里插入图片描述