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

Question

我在我的网页 form-fields 上使用了简单的 jQuery UI 工具提示（即响应式），它在每个浏览器的桌面上都能完美运行，但在 iPad 当我点击 form-fields 作为键盘 swipe-up 时，它会变形。我网页的 header 部分也固定在滚动条上。我在自定义 jQuery 工具提示中使用了以下代码。

$(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");
    });

});

我已将此代码写入 re-initialize 焦点字段的工具提示，方法是在文档大小更改时手动调用其 focusin 触发器。它在桌面浏览器上按预期工作，但在 iPad 工具提示上再次在同一位置 re-initialized 即不正确。

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 事件上显示工具提示。因此，如果您不想在焦点具有 changed/left.

时弹出工具提示，则还需要释放变量

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

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

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

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

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

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

Simple jQuery Tooltip (position distorted on iPad)

javascript

css

ipad

jquery-ui

tooltip