问题

上篇我们说到如何 将 DIV 全屏展示
在使用将页面中指定的 DIV 全屏展示后，出现全屏后 element-ui 组件不显示，全屏后展示的提示信息是没有的，如下如所示：

• 全屏前
  
• 全屏后
  

分析

使用fullScreen进行全屏后，查看弹框，发现其实提示弹框是正常加载的，但是挂载在body下：

ElementUI 解决方案

append-to-body 作用:tooltip是否插入到body中. 类型:boolean, 默认:true
该属性默认为true, 如果为true, 则tooltip默认插入到body元素中
设置为false, 则需要使用append方法手动插入. 如:

<script>
export default {name: 'App',data() {return {}},created() {this.$message('这是一条消息提示')},mounted() {console.log('this.$refs.elTooltip', this.$refs.elTooltip)// 因为将append-to-body设置成了false, 所以需要手动插入this.$refs.comp.appendChild(this.$refs.elTooltip.popperVM.$el)},
}
</script>
<template><div ref="comp"><h3>Hello Vue 2</h3><el-button type="primary">按钮</el-button><el-tooltip ref="elTooltip" :append-to-body="false" class="item" effect="light" placement="top"><el-button>上边</el-button><div slot="content" class="tooltipContainer"><div v-for="(item, index) in 100" :key="index">{{ item }}-这是内容</div></div></el-tooltip></div>
</template>
<style lang="scss">
.tooltipContainer {max-height: 200px;overflow: auto;
}
</style>

ElementPlus 解决方案

全屏时，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>

elementPlus中的tooltip，默认挂载在body下，使用fullScreen进行全屏后，查看弹框，发现其实提示弹框是正常加载的，但是挂载在body下： 查看tooltip文档说明，发现有属性设置提示内容附加在哪一个元素上，而翻看源码可知，默认会创建一个div放置，而这个div又会挂载在body上 而全屏时，fullscreen的并不是整个body，所以导致无法正常展示提示信息，所以需要将提示信息绑定在fullscreen进行全屏的元素的内部，那么就可以利用append-to进行设置

注意

1. 该方法只适用于单个的弹出框
2. 不适用于 for 循环生成的弹出框