element-plus: el-tooltip 乱浮动,append-to 失效问题

我写技术文章没那么多废话,直接上代码:
1.在vue中,直接使用如下:

<el-tooltip
     effect="dark"
     content="若不选择范围,则计算全部学生"
     placement="top"
     :append-to-body="false"
 >
    <el-icon class="tooltip-icon"><QuestionFilled /></el-icon>
</el-tooltip>

注:官方文档可能写有append-to这个属性,但是这个属性在实际开发中不存在,也就导致连续hover(el-tooltip)出现乱浮动的现象;查看源代码发现它只有append-to-body这个属性;

🍗🍗🍗遇到怪异问题,最好是看源码,有时候才是最快解决问题的办法。

2.要是还是乱浮动,请用这个方法:

<div style="position:relative">
	<el-tooltip
	     effect="dark"
	     content="若不选择范围,则计算全部学生"
	     placement="top"
	     :append-to-body="false"
	 >
	    <el-icon class="tooltip-icon"><QuestionFilled /></el-icon>
	</el-tooltip>
</div>

注:使用position:relative的主要原因是,它使用了append-to-body=false这个属性,导致它是以当前所在位置为参考的absolute定位,所以父级加一个position:relative就解决问题了。

3.实际效果
这两种方法联合使用,还有问题,不出意外那就是你代码的问题了!!!!

👿👿👿切记,注意自己的element-plus版本!高版本反而没有append-to-body,有append-to

4.感谢
如果觉得写得好,记得收藏哦 ~ (O_O) ~

  • 11
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值