jQuery UI工具提示不适用于全屏

Question

当一个包含工具提示元素的div变成一个全屏元素时，它就不再显示工具提示了。这可能是由于工具提示不是全屏容器的一部分，因为jQuery UI正在将它添加到主体中。在jQuery UI中似乎没有任何选项可以更改工具提示的父级。我创建了一个小提琴。这个用例有解决办法吗？

JSFiddle中的代码：

<div class="full-screen-div">
  <div class="tooltip">
    This is for tooltip
  </div>
  <br/><br/>
  <input class="toggle-full-screen" type="button" value="Toggle Fullscreen"/>
</div>

JavaScript：

$( document ).ready(function () {
    $(".full-screen-div").tooltip({
      track: true,
    items: ".tooltip",
    content: "123"
  });

  $(".toggle-full-screen").on("click", function () {
     if (document.fullscreenElement ||
            document.webkitFullscreenElement ||
            document.mozFullScreenElement ||
            document.msFullscreenElement) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
      } else {
          element = $(".full-screen-div").get(0);
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.webkitRequestFullscreen) {
         element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
          } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
          }
      }
  });
});

CSS：

.full-screen-div {
  border: 1px solid red;
  width: 250px;
  padding: 3em;
  background: white;
}

.tooltip {
  border: 1px solid grey;
  cursor: pointer;
}

Answer 1

正如您正确地指出的，问题是JQueryUI将提示元素添加到主体中。您可以通过在打开事件中将元素重新附加到所需的容器来更改此操作。

不过，只有在全屏模式下才应该这样做。提示的位置似乎是相对于窗口计算的，所以如果您一直应用这个方法，那么最终提示会出现在与其预期位置相偏移的位置上。

下面是一个基本的例子。这假设您有一个函数isFullscreen()来检测当前是否处于全屏模式。

$(document).tooltip({
    open: function (e, ui) {
        if (isFullScreen()) {
            ui.tooltip.appendTo(".full-screen-div");
        }
    }
});

注意:当没有全屏时，您不必显式地进行appendTo，因为元素每次都会被重置。

参见@Kishor - jsfiddle.net/vhzpnsq9 9提供的示例