【踩坑日记】-使用fullscreen进行全屏操作后,elementplus中的tooltip无法正常展示解决办法

287 阅读1分钟

elementPlus中的tooltip,默认挂载在body下,使用fullScreen进行全屏后,查看弹框,发现其实提示弹框是正常加载的,但是挂载在body下:

image.png 查看tooltip文档说明,发现有属性设置提示内容附加在哪一个元素上,而翻看源码可知,默认会创建一个div放置,而这个div又会挂载在body上

而全屏时,fullscreen的并不是整个body,所以导致无法正常展示提示信息,所以需要将提示信息绑定在fullscreen进行全屏的元素的内部,那么就可以利用append-to进行设置

<!-- 父元素绑定ref -->
<div class="chart_head" ref="classOverViewTooltipRef">
	<span class="chart_title">各班级概况</span>
	<!-- 	挂在到父元素上 -->
	<el-tooltip effect="dark" placement="top" :append-to="classOverViewTooltipRef">
		<template #content> 统计数据来源:当前所选条件下,每个学生当前课程的<br />最新一次成绩 </template>
		<el-icon><InfoFilled /></el-icon>
	</el-tooltip>
</div>