Простая jQuery Tooltip (позиция, искаженная на iPad)

Question

Я использовал простую подсказку jQuery UI для полей формы моей веб-страницы (особенно отзывчивый), прекрасно работающий на рабочем столе в каждом браузере, но на 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.

Сначала сохраните ссылку на элемент, для которого всплывающая подсказка активна, прослушивая ее события, добавив следующие коды в свою инициализацию всплывающей подсказки (сохраняйте свой существующий код так, как есть. Просто добавьте эти дополнительные инструкции).

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. Вы можете вызвать функцию restTooltip, указав события ajax в gloab. См. Пример ниже.

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

Я надеюсь, что это вам поможет. Спросите меня, нужны ли вам какие-либо дополнительные разъяснения.