Element: [Bug Report] If there is a full screen effect on a DIV, the Popover and Tooltip will not display properly.如果一个DIV开启全屏效果，则Popover和Tooltip不能正常显示。

Created on 12 Oct 2019 · 12Comments · Source: ElemeFE/element

Element UI version

2.12.0

OS/Browsers version

Windows 10 Pro 1903 / Google Chrome 77.0.3865.90

Vue version

2.6.10

Reproduction Link

https://jsfiddle.net/3ej0x5yf/

Steps to reproduce

click the blue button to full screen, the Popover and Tooltip will not display properly

What is Expected?

If there is a full screen effect on a DIV, the Popover and Tooltip is ok.

What is actually happening?

If there is a full screen effect on a DIV, the Popover and Tooltip will not display properly

Source

gongzk

Most helpful comment

最近也遇到了同样的问题，看了下element的源码，发现可以这么解决~
popover可以直接加:append-to-body="false"，但是tooltip麻烦点，加完appendToBody后发现弹出内容没有插入dom……所以自己写了个指令作为辅助，解决问题^_^

/*
!!! 使用此指令需要先设置<el-tooltip :append-to-body="false">

例子1：v-el-tooltip-append-to="$des"
例子2：v-el-tooltip-append-to
说明：$des为要将文字提示的弹出框插入的目的节点元素，不写则默认插入指令绑定节点元素的父节点
*/
import { DirectiveBinding } from 'vue/types/options';
import { VNode } from 'vue';

export default {
  bind(el: any, binding: DirectiveBinding, vnode: VNode) {
    el.tooltipAppend = () => {
      // 插入的目的节点元素
      const des = binding.value || el.parentElement;
      // 获取tooltip的节点元素popper
      const popper = vnode.componentInstance && vnode.componentInstance.$refs.popper as Element;
      // 将popper插入目的节点元素
      if (popper && des && !document.getElementById(popper.id)) {
        des.appendChild(popper);
      }
    };

    el.removeEventListener('mouseenter', el.tooltipAppend);
    el.addEventListener('mouseenter', el.tooltipAppend);
  },
  unbind(el: any) {
    el.removeEventListener('mouseenter', el.tooltipAppend);
  },
};

linjiayu2012 on 26 Mar 2020

👍3

All 12 comments

如果一个DIV开启全屏效果，则Popover和Tooltip不能正常显示。

gongzk on 12 Oct 2019

如果一个DIV开启全屏效果，则Popover和Tooltip不能正常显示。

我也遇到了这个问题，不能正常显示的原因是因为Popover和Tooltip是直接挂在body下，局部全屏只能全屏你这个div以及内部的元素。不过我参考官方提供api修改Popover的opover-options好像没什么效果。

wen81643956 on 21 Nov 2019

Hi all, I just fix this using body tag element. if el-tooltip element apended to body means you should assign the body element as fullscreen element..

var element = document.getElementsByTagName('body')[0];

prasanthmaran1 on 11 Feb 2020

同样问题，觉得 tooltip 和 popover 应该提供类似 getContainer 之类的 props

farzer on 12 Feb 2020

/*
!!! 使用此指令需要先设置<el-tooltip :append-to-body="false">

例子1：v-el-tooltip-append-to="$des"
例子2：v-el-tooltip-append-to
说明：$des为要将文字提示的弹出框插入的目的节点元素，不写则默认插入指令绑定节点元素的父节点
*/
import { DirectiveBinding } from 'vue/types/options';
import { VNode } from 'vue';

export default {
  bind(el: any, binding: DirectiveBinding, vnode: VNode) {
    el.tooltipAppend = () => {
      // 插入的目的节点元素
      const des = binding.value || el.parentElement;
      // 获取tooltip的节点元素popper
      const popper = vnode.componentInstance && vnode.componentInstance.$refs.popper as Element;
      // 将popper插入目的节点元素
      if (popper && des && !document.getElementById(popper.id)) {
        des.appendChild(popper);
      }
    };

    el.removeEventListener('mouseenter', el.tooltipAppend);
    el.addEventListener('mouseenter', el.tooltipAppend);
  },
  unbind(el: any) {
    el.removeEventListener('mouseenter', el.tooltipAppend);
  },
};

linjiayu2012 on 26 Mar 2020

👍3

@linjiajian999 如果我在 el-dialog 中使用了 el-tooltip，你的辅助指令也能显示加了 append-to-body="false" 的 tooltip 吗