elementui将tooltip显示到指定dom

在使用element-ui组件库的时候，tooltip组件，它们在显示弹出部分的内容时，实际上这部分内容是被放在body根节点下的。而如果放在根节点有时候我们的某一些需求就无法得到实现，不得不将其放在我们指定的地方。

解决办法

<template>
    <div>
        <el-tooltip
                placement="top"
                :append-to-body="false" 
                content="你好ToolTip"
                ref="mypop">  <!-- 为方便寻找，使用ref直接拿；重点：:append-to-body="false" -->
            <el-button>提示</el-button>
        </el-tooltip>

        <!-- 希望将tooltip的弹出部分内容的dom放在这里面 -->
        <div ref="here"></div>
    </div>
</template>

<script>
    export default {
        mounted() {
            // 在mounted的时候只需要使用这句话。
            this.$refs.here.appendChild(
                this.$refs.mypop.popperVM.$el
            )
        }
    }
</script>

实现原理

tooltip是基于vue-popper扩展的，而vue-popper组件提供了appendToBody参数，它默认值是true，也就是默认就会把弹出的内容添加到body根节点。部分重要代码入下：

// vue-popper.js 的部分代码
  methods: {
    createPopper() {
      ...

      if (!popper || !reference) return;
      if (this.visibleArrow) this.appendArrow(popper);

      // 这里可以看到，根据参数来决定是否要把弹出的内容显示添加到body根节点。
      if (this.appendToBody) document.body.appendChild(this.popperElm);

      ...

一旦我们将appendToBody参数设置为了false，那弹出的内容根本就不会出现在界面上了，所以我们需要自己在mounted生命周期函数里手动将对应的弹出内容添加到界面上，经过简单的代码阅读，不难发现：

tooltip组件内部的popperVM.$el就是弹出内容。

只需要将它们添加到我们自己想要的地方即可。