Question

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

就我而言，我正在使用Leaflet和HTML5全屏API来以全屏显示地图。当将鼠标悬停在地图上的某些元素上时，我还使用jQueryUI工具提示来显示一些信息。不幸的是，在全屏模式下，工具提示会被地图覆盖。因此它们存在但在地图“下方”。

据我从the fullscreen spec的了解，使用全屏显示时会添加一个新图层，该图层位于其他所有图层之上。因此，自然不会出现工具提示，因为jQueryUI将工具提示附加在正文的末尾，并且全屏显示应用于正文中div中的地图。

我需要这些工具提示在全屏模式下可见。所以我想我需要将工具提示附加到地图的div上。因此，全屏模式还认为工具提示位于顶层。

返回第一个链接：它说不可能更改工具提示的DOM位置。

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

（来自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.2.4 CSS正在使用jQuery UI 1.9.0 CSS。将其更新为正确的CSS。

确保您的HTML正确且正确地加载了资源。

那应该有帮助。

jQueryUI工具提示+全屏

1 个答案: