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

[gongzk]

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

[gongzk]

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

[wen81643956]

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

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

[prasanthmaran1]

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];

[silent-tan]

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

[linjiayu2012]

最近也遇到了同样的问题，看了下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);
  },
};

[Leecason]

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

[linjiajian999]

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

@Leecason 老哥是不是 艾特 错人了

[Leecason]

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

@Leecason 老哥是不是 艾特 错人了

对不起～😄

[Leecason]

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

[linjiayu2012]

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

可以的，这个指令只是用来解决将tooltip的append-to-body设置为false时提示框没有插入dom的问题。

[jawn-ha]

发现datepicker 以及 下拉框也存在这种问题 有办法解决吗 ？

[linjiayu2012]

发现datepicker 以及 下拉框也存在这种问题 有办法解决吗 ？

可以的，他们俩实际用的是popover。datepicker可以直接用:append-to-body="false"，下拉框的话官方文档有说明，可以用:popper-append-to-body="false"

[13164286167]

@linjiayu2012 我的tooltip是在table里的 。 然后用了你这个之后出现了tooltip定位出错的问题。你有遇到过嘛。比如我鼠标悬浮屏幕最下面的文字，结果tooltip出现在屏幕最上面[捂脸]

[jawn-ha]

@linjiayu2012 我的tooltip是在table里的 。 然后用了你这个之后出现了tooltip定位出错的问题。你有遇到过嘛。比如我鼠标悬浮屏幕最下面的文字，结果tooltip出现在屏幕最上面[捂脸]

我找到了一个新的解决办法，全屏body然后把目标div添加以下css属性 .fullscreen-target { position:fixed !important; z-index:2002; top: 0; left: 0; right: 0; bottom: 0; }

[jhxxs]

上面的解决方案都不完美，我试过生成两个popover，然后根据是否全屏来显示不同的popover，但还是有问题。 最后使用 popperjs 写了。

[aoyoo111]

还是用 el-popover 代替了 el-tooltip, 设置append-to-body="false",修改css样式即可 /* popover提示样式 */ .el-popover { min-width: 66px; background: #303133; border: 1px solid #303133; padding: 0px; text-align: center; .el-popover__title { color: #fff; font-size: 12px; line-height: 1; margin: 10px 0; } .popper__arrow { border-right-color: #303133; } .popper__arrow::after { border-right-color: #303133; } }

[dorahasadream]

局部全屏下分页的调整每页显示条数选择框也点不了

[2016011969sunyifang]

还是用 el-popover 代替了 el-tooltip, 设置append-to-body="false",修改css样式即可 /* popover提示样式 */ .el-popover { min-width: 66px; background: #303133; border: 1px solid #303133; padding: 0px; text-align: center; .el-popover__title { color: #fff; font-size: 12px; line-height: 1; margin: 10px 0; } .popper__arrow { border-right-color: #303133; } .popper__arrow::after { border-right-color: #303133; } }

为什么我设置append-to-body后直接不渲染了 好奇怪 是版本原因么 在文档中也没有找到这个配置

[mike652638]

@linjiayu2012 我的tooltip是在table里的 。 然后用了你这个之后出现了tooltip定位出错的问题。你有遇到过嘛。比如我鼠标悬浮屏幕最下面的文字，结果tooltip出现在屏幕最上面[捂脸]

我找到了一个新的解决办法，全屏body然后把目标div添加以下css属性 .fullscreen-target { position:fixed !important; z-index:2002; top: 0; left: 0; right: 0; bottom: 0; }

亲测可行, 这应该是目前最好的方案了。即使是el-popover 等组件使用已支持的:popper-append-to-body="false"等属性, 依然不方便(需要动态设置, 全屏时为false, 非全屏时为true, 而且与el-column fixed也存在冲突)。

[Dinrer]

基于前面指令版本重新写了一个，不需要设置popper-append-to-body和append-to-body，只在全屏模式生效

export const elTooltipFullscreen = {
    bind(el, binding, vnode) {
        el.tooltipAppend = () => {
            if (!document.fullscreenElement) return;
            const des = binding.value || document.fullscreenElement;
            setTimeout(() => {
                const popper = vnode.componentInstance?.$refs.popper;
                const popperNode = document.getElementById(popper.id);
                if (popper && !popperNode) {
                    des.appendChild(popper);
                } else if (popperNode && !des.contains(popperNode)) {
                    des.appendChild(popperNode);
                }
            }, 50);

        };

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

[yinyiyu]

基于前面指令版本重新写了一个，不需要设置popper-append-to-body和append-to-body，只在全屏模式生效

export const elTooltipFullscreen = {
    bind(el, binding, vnode) {
        el.tooltipAppend = () => {
            if (!document.fullscreenElement) return;
            const des = binding.value || document.fullscreenElement;
            setTimeout(() => {
                const popper = vnode.componentInstance?.$refs.popper;
                const popperNode = document.getElementById(popper.id);
                if (popper && !popperNode) {
                    des.appendChild(popper);
                } else if (popperNode && !des.contains(popperNode)) {
                    des.appendChild(popperNode);
                }
            }, 50);

        };

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

@Dinrer 你好，请问一下应该如何使用你写的这个指令呢。