Подсказка jQueryUI + полноэкранный режим

мой вопрос несколько связан с этим вопросом: Подсказка пользовательского интерфейса jQuery: управление позицией 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();

Элементы управления имеют свои всплывающие подсказки, которые отображаются при наведении на «маленькую» версию карты. При переключении в полноэкранный режим (пустая кнопка управления) всплывающие подсказки больше не отображаются.


javascript jquery leaflet jquery-ui html5-fullscreen
person xen    schedule 11.12.2018    source источник
comment
Добро пожаловать в Stack Overflow. Звучит как что-то, что можно исправить с помощью CSS, возможно, отрегулировав z-index, но я не уверен. Предоставьте минимальный, полный и проверяемый пример: stackoverflow.com/help/mcve   -  person Twisty    schedule 11.12.2018
comment
Глядя на другой вопрос, OP не был заинтересован в создании большего количества кода, но при использовании стандартного выполнения всплывающих подсказок это не позволяет перемещать элементы <div> или параметр appendTo. Используя $.widget() (фабрику виджетов), вы можете сделать это по-своему.   -  person Twisty    schedule 11.12.2018

Ответы (1)


arrow_upward
0
arrow_downward

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

По крайней мере, с 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.0 CSS используется с jQuery UI 1.12.4. Обновлено это до правильного CSS.

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

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

person Twisty    schedule 12.12.2018
comment
Этот код не использует никаких полноэкранных функций, поэтому он не имеет ничего общего с проблемой. Я пытаюсь воссоздать ситуацию в jsfiddle, так как не могу поделиться кодом проекта, но это может занять некоторое время. - person xen; 12.12.2018
comment
добавил пример к вопросу! - person xen; 12.12.2018
comment
@xen Я не заходил в полноэкранный режим. Более ясно, в чем может быть проблема на данный момент. Будет исследовать больше. - person Twisty; 12.12.2018
comment
Спасибо за ваше время :) дайте мне знать, если у вас есть ЛЮБАЯ новая информация по этому вопросу, может быть, я смогу найти что-то самостоятельно с дополнительной информацией. - person xen; 13.12.2018