rg6*_*rg6 6 javascript ajax jquery tooltip twitter-bootstrap
我想要一个工具提示，显示鼠标悬停时立即加载GIF，并由AJAX成功回调产生的HTML代替。关于AJAX工具提示的错误答案几乎和在线上问这个确切问题的人数一样多。特别是，我一直在造型我的努力就这个，这个，尤其是几个答案在这里。
对于所有这些解决方案，即使是那些专门声称要解决该问题的解决方案，我始终遇到的问题是，工具提示有时会出现得很晚而无法消失。这也不是库问题，因为过去我在使用jQuery-UI工具提示时遇到了相同的问题。
先前尝试使用jQuery 1并遇到了相同的问题：
我的页面也依赖jQuery Datatables v1.10.11库，但这与工具提示问题正交，除了我的特定用例生成具有可变延迟的更多和更快的AJAX工具提示请求这一事实之外，这增加了观察工具提示的可能性。 “粘”的问题。
我当前的解决方案大致基于此处的'towr'答案，非常接近有效。我已经尝试过该页面上方的所有解决方案，它们要么由于某种原因而损坏，要么存在“粘滞”工具提示问题。
因此，在AJAX请求加载数据以填充表之后，我按class遍历单元格$( ".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一起显示并粘贴，尽管鼠标没有悬停在它们上。通过打印语句和调试，我可以验证其中的值if( <hover-check> ) 依次正确地是10个元素中的每一个，因此以某种方式，悬停检查本身要么是不正确的，要么返回过时的信息。
在对应于该元素的回调已准备好工具提示内容时，如何准确确定鼠标当前是否位于该元素的顶部？
在解决此问题时，我遇到了两个复杂的问题，但我认为它们没有关系。
1）.tooltip()除非我的jQuery JS包含在其中<head>并且Bootstrap JS包含在HTML主体的底部，否则我将得到一个不确定的错误。如果我将Bootstrap向上移动或将jQuery向下移动（始终使jQuery在Bootstrap之上），则会收到错误消息。
2）此处的解决方案看起来不错，但是无论我多么努力地重复代码，我在代码$el.data(...) undefined行$el.data('tooltip').tip().is(':visible')中都会出错。尽管链接的演示页面本身对我来说工作正常。
我希望这个问题可以成为想要这样做的人们的规范资源，因为昨天我实际上花了16（是，实际上是16）小时来解决这个问题，实现了我可以想像到的每一个在线解决方案的所有变体。
对我来说，关键在于此处提供的解决方案，我已在原始问题中链接了该解决方案。
该解决方案在源代码中出现的问题是使用$el.data('tooltip').tip().is(':visible')它总是会导致错误$el.data(...) undefined，但检查工具提示的显示状态而不是鼠标的悬停状态的想法似乎很有希望。
对 Bootstrap v3.3.6 工具提示操作的仔细检查表明，它将悬停元素上的“aria-descriptedby”设置为工具提示的元素 ID。有了这些信息，我们可以做$( "#" + $el.attr( "aria-describedby" ) ).is( ":visible" )
我不知道这将如何适应未来，但它最终是“坚持”的。
$( ".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" );
}
}
);