社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

jqueryui工具提示+全屏

xen • 4 年前 • 635 次点击  

我的问题与这个问题有些关系: 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
 
635 次点击  
文章 [ 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以正确的顺序正确地加载资源。

这应该会有帮助。