Question

我在网页的表单字段（即响应式）上使用了简单的jQuery UI工具提示，它在每台浏览器上都能在桌面上完美运行，但在iPad上，当我点击表单字段作为键盘滑动时，它会变形-up。我的网页的标题部分也在滚动时固定。我在下面的代码中使用了自定义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();
});

我希望它会对你有所帮助。问我是否需要进一步澄清。

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

1 个答案: