jQueryUI Tooltip + Fullscreen - PullRequest
Новая
       28

jQueryUI Tooltip + Fullscreen

0 голосов
/ 11 декабря 2018

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

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

1 Ответ

0 голосов
/ 12 декабря 2018

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

По крайней мере, с 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 загружает ресурсы правильно и в правильном порядке.

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

...