Question

将具有带有工具提示的元素的div设为全屏元素时，它不再显示工具提示。可能是由于jQuery UI将工具提示添加到正文中时，工具提示不属于全屏容器。 jQuery UI中似乎没有任何选项可以更改工具提示的父级。我创建了一个fiddle。此用例有解决方法吗？

JSFiddle中的代码： HTML：

<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将tip元素添加到主体。您可以通过在 open 事件中将元素重新附加到所需的容器来更改此设置。

不过，在全屏模式下，您应该仅执行此操作。笔尖的位置似乎是相对于窗口计算的，因此，如果始终应用该笔尖，最终将使笔尖显示在偏离其预期位置的位置。

这是一个基本示例。假定您具有一个 isFullscreen（）函数，该函数可检测您当前是否处于全屏模式。

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

注意：当不处于全屏状态时，您不必显式地 appendTo ，因为每次都会重置该元素。

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

jQuery UI工具提示无法在全屏模式下工作

1 个答案: