我想要一个工具提示，它会在鼠标悬停时立即显示加载GIF，该替换为由AJAX成功回调产生的HTML。对于AJAX工具提示，几乎有很多破碎的答案，就像人们在网上提出这个问题一样。特别是，我一直在this，this，特别是几个答案here建模我的工作。
我一直遇到的所有这些解决方案的问题，即使是那些特别声称要解决这个问题的解决方案，是因为工具提示偶尔出现得很晚而且不会消失。这也不是一个库问题，因为我在过去使用jQuery-UI工具提示时遇到了同样的问题。
之前尝试使用jQuery 1并遇到了同样的问题：
我的页面也依赖于jQuery Datatables v1.10.11库，但这与工具提示问题是正交的，除了我的特定用例生成更多更快的具有可变延迟的AJAX工具提示请求这一事实，这增加了概率观察“粘滞”问题。
我目前的解决方案大致基于'towr'here的答案，该答案非常接近于工作。我已经尝试了上面的每个解决方案，它们或者由于某种原因而被破坏，或者出现“粘滞”工具提示问题。
因此，在AJAX请求加载数据以填充表之后，我按类$( ".tooltip-cell" ).on( "mouseover", set_tooltip )迭代单元格，其中set_tooltip是执行以下操作的函数
var $e = $(this);
if( $e.attr( "title" ) === undefined ) { // request data once per cell
// show loading GIF
$e.attr( "title", "<img src='images/wait.gif'/>" );
$e.tooltip(
{
html: true,
trigger: "hover"
}
).tooltip( "show" );
// perform AJAX GET
$.ajax(
{
url: "ajax/tooltip_data.php",
data:
{
lookup_id: $e.attr("lookup_id")
},
success:
function(response) {
// prepare final version of tooltip
$e.attr( "title", response ).tooltip( "fixTitle" );
// if mouse still hovers, display final version
if( $e.is( ":hover" ) ) {
$e.tooltip( "show" );
}
},
dataType: "html"
}
);
}
这里的问题是AJAX成功回调中的悬停检测。现在显然.is(":hover")已被弃用了很长一段时间，所以我尝试了各种替代方法，例如$( ":focus :active" ).filter( $e ).length > 0，但结果总是显示所有工具提示和粘贴或没有工具提示显示。通过引入setTimeout( function() {}, 2000 );将代码包装在回调中，可以很容易地重现这一点。然后问题总是发生。事实上，我可以创建10个相邻的工具提示，在它们之间运行鼠标，2秒后，它们都将以AJAX HTML和棒状显示，尽管鼠标没有悬停在其中任何一个上。使用print语句和调试，我可以验证if( <hover-check> )中的值是否正确，依次是10个元素中的每个元素，因此悬停检查本身不正确或返回陈旧信息。
在与该元素对应的回调编写工具提示内容时，如何准确确定鼠标当前当前位于元素顶部？
我在处理这个问题时遇到了两个复杂的问题，但我认为它们并不相关。
1）我收到一个.tooltip()未定义的错误，除非我的jQuery JS包含在<head>中，而我的Bootstrap JS包含在我的HTML主体的底部。如果我向上移动Bootstrap或向下移动jQuery（始终将jQuery保持在Bootstrap之上），我就会收到错误。
2）解决方案here似乎不错，但无论我尝试复制代码有多紧密，我的代码中的$el.data(...) undefined行都会出现$el.data('tooltip').tip().is(':visible')错误。尽管链接的演示页面本身对我来说很好。
我希望这个问题可以成为想要这样做的人的规范资源，因为我昨天花了16个小时（是的，真的是16个小时）来处理这个问题，实现我能想到的每一个我能找到的解决方案的变化在线。
答案 0 :(得分：0)
对我而言，关键在于here提供的解决方案，我在原始问题中将其链接起来。
源代码中出现的此解决方案的问题是$el.data('tooltip').tip().is(':visible')的使用总是导致错误$el.data(...) undefined，但是检查工具提示的显示状态而不是悬停的想法小鼠的状况似乎很有希望。
对Bootstrap v3.3.6工具提示操作的仔细研究表明，它设置了“aria-describedby＆＃39;在悬停元素上，工具提示的元素ID。有了这些信息，我们可以$( "#" + $el.attr( "aria-describedby" ) ).is( ":visible" )
我不知道这将会是什么样的未来证明，但它最终是＆＃34;坚持＆＃34; -proof。
$( ".ajax-tooltip-required" ).tooltip(
{
html: true,
trigger: "manual"
}
).on(
{
mouseenter:
function() {
var $el = $(this);
if( $el.data( "fetched" ) === undefined ) {
$el.data( "fetched", true );
$el.attr( "data-original-title", "<img src='images/wait.gif'/>" ).tooltip( "show" );
$.ajax(
{
url: "ajax/tooltip_data.php",
data: {
lookup_id: $el.attr("lookup_id")
},
success:
function( response ) {
$el.attr( "data-original-title", response );
if( $( "#" + $el.attr( "aria-describedby" ) ).is( ":visible" ) ) {
$el.tooltip( "show" );
}
},
dataType: "html"
}
);
} else {
$(this).tooltip( "show" );
}
},
mouseleave:
function() {
$(this).tooltip( "hide" );
}
}
);