jQueryUI 工具提示 + 全屏

Question

我的问题与这个问题有些相关：jQuery UI Tooltip: Manipulate DOM position

在我的例子中，我使用 Leaflet 和 HTML5 Fullscreen API 来实现全屏显示地图。我还使用 jQueryUI 工具提示来在将鼠标悬停在地图上的某些元素上时显示一些信息。不幸的是，在全屏模式下，工具提示会被地图覆盖。因此它们存在于地图“下方”。

据我从the fullscreen spec 了解到，使用全屏时会添加一个新图层，该图层高于其他图层。因此，工具提示自然不会可见，因为 jQueryUI 将工具提示附加到正文的末尾，并且全屏应用于正文中的 div 中的地图。

我需要这些工具提示在全屏模式下可见。所以我想我需要将工具提示附加到地图的 div 中。所以全屏模式也认为工具提示在顶层。

返回第一个链接：它表示无法更改工具提示的 DOM 位置。

有人可以帮助我解决这个问题吗？还是只是不可能？任何提示表示赞赏。

这里是一个例子：https://jsfiddle.net/7Lturfv2/

（来自 Javascript）

var map = L.map('map', {
    fullscreenControl: true,
    fullscreenControlOptions: {
    position: 'topleft'
  }
}).setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a 
  href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  maxZoom: 18
}).addTo(map);

$(document).tooltip();

控制元素有其工具提示，当鼠标悬停在“小”版地图中时会显示这些提示。如果切换到全屏（空白控制按钮），则不再显示工具提示。

Answer 1

没有代码示例，不清楚会发生什么。

至少对于 jQuery UI Modal，它确实可以按预期工作。

https://jsfiddle.net/Twisty/x7wc51qk/

JavaScript

$(function() {
  $(document).tooltip();
  $(".dialog").dialog({
    autoOpen: false,
    resizable: false,
    height: "auto",
    width: 400,
    modal: true,
    buttons: {
      "Delete all items": function() {
        $(this).dialog("close");
      },
      Cancel: function() {
        $(this).dialog("close");
      }
    }
  });
  $("#show-diag-btn").click(function() {
    $(".dialog").dialog("open");
  })
});

示例由 https://jqueryui.com/tooltip/ 和 https://jqueryui.com/dialog/#modal-confirmation 构建

更新

您的小提琴配置不正确。我分叉了它并正确更新了资源：

https://jsfiddle.net/Twisty/hv7ak1rb/

工具提示在更新后按预期工作。我发现 jQuery UI 1.9.0 CSS 与 jQuery UI 1.12.4 一起使用。将此更新为正确的 CSS。

确保您的 HTML 以正确的顺序正确加载资源。

这应该会有所帮助。