jQueryUI Tooltip + Fullscreen

Question

Мой вопрос несколько связан с этим вопросом: jQuery UI Tooltip: манипулировать позицией DOM

В моем случае я использую Leaflet и полноэкранный API HTML5, чтобы сделать возможным отображение карты в полноэкранном режиме. Я также использую всплывающую подсказку 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

Без примера кода не ясно, что может происходить.

По крайней мере, с 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/

Обновить

Ваша скрипка была настроена неправильно. Я раздвоил и обновил ресурсы должным образом:

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

После обновления всплывающие подсказки работают, как и ожидалось. Я нашел jQuery UI 1.9.0 CSS в использовании с jQuery UI 1.12.4. Обновил это до правильного CSS.

Убедитесь, что ваш HTML загружает ресурсы правильно и в правильном порядке.

Это должно помочь.