Py学习  »  Jquery

jqueryui工具提示+全屏

xen • 4 年前 • 609 次点击  

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

在我的例子中,我使用传单和html5全屏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();

控件元素有它们的工具提示,当鼠标悬停在地图的“小”版本中时会显示这些提示。如果切换到全屏(空白控制按钮),则不再显示工具提示。

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/43551
 
609 次点击  
文章 [ 1 ]  |  最新文章 4 年前
Twisty
Reply   •   1 楼
Twisty    5 年前

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

至少对于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.0css与jqueryui1.12.4一起使用。将此更新为正确的css。

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

这应该会有帮助。