JQuery UI подсказка не работает в полноэкранном режиме

Question

Когда div, содержащий элементы со всплывающими подсказками, превращается в полноэкранный элемент, он больше не отображает всплывающие подсказки.Это может быть связано с тем, что всплывающая подсказка не является частью полноэкранного контейнера, поскольку пользовательский интерфейс jQuery добавляет его в тело.Кажется, в jQuery UI нет возможности изменить родительский элемент всплывающей подсказки.Я создал скрипку .Есть ли обходной путь для этого варианта использования?

Код в JSFiddle: HTML:

<div class="full-screen-div">
  <div class="tooltip">
    This is for tooltip
  </div>
  <br/><br/>
  <input class="toggle-full-screen" type="button" value="Toggle Fullscreen"/>
</div>

JavaScript:

$( document ).ready(function () {
    $(".full-screen-div").tooltip({
      track: true,
    items: ".tooltip",
    content: "123"
  });

  $(".toggle-full-screen").on("click", function () {
     if (document.fullscreenElement ||
            document.webkitFullscreenElement ||
            document.mozFullScreenElement ||
            document.msFullscreenElement) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
      } else {
          element = $(".full-screen-div").get(0);
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.webkitRequestFullscreen) {
         element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
          } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
          }
      }
  });
});

CSS:

.full-screen-div {
  border: 1px solid red;
  width: 250px;
  padding: 3em;
  background: white;
}

.tooltip {
  border: 1px solid grey;
  cursor: pointer;
}

Answer 1

Проблема, как вы правильно заметили, заключается в том, что JQueryUI добавляет элемент tip в тело.Вы можете изменить это, повторно прикрепив элемент к нужному контейнеру в событии open .

Вы должны только сделать это, когда вы находитесь в полноэкранном режимехоть.Положение наконечника, по-видимому, рассчитывается относительно окна, поэтому, если вы применяете это все время, в конечном итоге подсказки отображаются со смещением относительно их предполагаемого места.

Вот базовый пример.Предполагается, что у вас есть функция isFullscreen () , которая определяет, находитесь ли вы в полноэкранном режиме или нет.

$(document).tooltip({
    open: function (e, ui) {
        if (isFullScreen()) {
            ui.tooltip.appendTo(".full-screen-div");
        }
    }
});

Примечание: вам не нужно явно appendTo когда не в полноэкранном режиме, поскольку элемент каждый раз сбрасывается.

См. Этот пример, предоставленный @Kishor - jsfiddle.net / vhzpnsq9