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