简单的jQuery工具提示（在iPad上的位置失真）

Question

我在网页的表单域上使用了简单的jQuery UI工具提示（即Viz响应），它在每种浏览器的桌面上均能完美运行，但是在iPad上，当我轻敲键盘上的表单域时，它会失真。 我网页的标题部分也固定在滚动条上。 我将以下代码用于自定义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");
    });

});

我编写了这段代码，以通过在文档大小更改时手动调用它的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 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();
});

希望对您有帮助。 问我是否需要进一步的澄清。