jQueryUI工具提示+全屏

Question

我的问题与这个问题有些相关：jQuery UI工具提示：操纵DOM位置

在我的情况下，我使用传单和HTML5全屏API，使其能够在全屏显示地图。我还使用jQueryUI工具提示，以便在悬停在地图上的某些元素上时能够显示一些信息。不幸的是，在全屏模式下，工具提示会被地图覆盖。因此，它们存在，但"在"地图之下。

据我从全屏规范中了解，在使用全屏时会添加一个新层，它位于其他层之上。因此，工具提示自然是不可见的，因为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

如果没有代码示例，就不清楚可能发生什么。

至少在使用jQueryUI-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-确认

更新

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

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

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

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

这应该会有所帮助。