简单的 jQuery 工具提示（iPad 上的位置扭曲）

Question

我在网页的表单域上使用了简单的 jQuery UI 工具提示（即响应式），它在每个浏览器的桌面上都能完美运行，但在 iPad 上，当我点击表单域作为键盘向上滑动时，它会失真.我的网页的标题部分也固定在滚动上。 我已经为自定义 jQuery Tooltip 使用了以下代码。

$(function () {
    $('.form-control').tooltip({
      disabled: true,
      position: {
      my: "left top",
      at: "left top-50",
      using: function( position, feedback ) {
        $( this ).css( position );
        $( "<div>" )
        .addClass( "arrow" )
        .addClass( feedback.vertical )
        .addClass( feedback.horizontal )
        .appendTo( this );
      }
      }
    }).on("focusin", function () {

        $(this)
            .tooltip("enable")
            .tooltip("open");

    }).on("focusout", function () {
        $(this)
            .tooltip("close")
            .tooltip("disable");
    });

});

我编写了这段代码，通过在文档大小更改时手动调用其focusin 触发器来重新初始化焦点字段的工具提示。它在桌面浏览器上按预期工作，但在 iPad 上的工具提示再次在同一位置重新初始化，即不正确。

var toolTipEl;
$('#inputSuccess, #inputWarning').tooltip({
  open: function (event, ui) {
   toolTipEl = event.target;
}
});
function checkDocumentHeight(callback){
var lastHeight = document.body.clientHeight, newHeight, timer;
(function run(){
  newHeight = document.body.clientHeight;

  if( lastHeight != newHeight )
    callback();
  lastHeight = newHeight;
  timer = setTimeout(run, 100);
})();
}
function doSomthing(){
  console.log('document resized');


setTimeout(function() {
if ($(toolTipEl).is(':focus')) {
  $(toolTipEl).trigger('focusout').trigger('focusin');
    }
 }, 500);
}
checkDocumentHeight(doSomthing);

请帮我找出解决办法。

Answer 1

您需要在完成任何会导致文档内容（实际上是高度）变化影响您的Tooltip 位置的事件后重新初始化活动的Tooltip。

首先通过在工具提示初始化中添加以下代码来监听其事件，从而保持工具提示处于活动状态的元素的引用（保持现有代码不变。只需添加这些附加语句）。

var toolTipEl = undefined;

$(function () {

    $('.form-control').tooltip({

      open: function (event, ui) {
        toolTipEl = event.target;
      }

    }).on("focusin", function () {

         toolTipEl = undefined;

    }).on("focusout", function () {

        toolTipEl = undefined;

    }).on("mouseleave", function () {

        toolTipEl = undefined;

    });

});

请注意，因为您也在 focusin 事件上显示工具提示。因此，如果您不希望在焦点已更改/离开时弹出工具提示，您还需要释放变量。

然后创建一个function 用于重置工具提示，如下所示。

function resetTooltip() {
  if (toolTipEl) {
    $(toolTipEl).trigger('focusout').trigger('focusin');
  };
}

在导致文档高度发生变化的任何事件中调用此function。例如，如果内容来自 ajax 请求。您可以通过列出 gloab ajax 事件来调用 restTooltip 函数。请参见下面的示例。

$( document ).ajaxComplete(function() {
  resetTooltip();
});

希望对你有所帮助。询问我是否需要进一步说明。