我正在寻找用于在光标悬停在元素上时显示工具提示的 JQuery 代码示例或库。具体来说，我想做的是在悬停时显示我自己的 <div> 元素，而不是自动构建或从主机元素加载的工具提示。我查看了几个 JQuery 工具提示插件，它们似乎都无法做到这一点，但在其他方面非常复杂。这似乎只需要几行 JS/JQuery 就可以完成，但我也找不到任何可用的教程。
一个理想的解决方案还可以处理边框附近的工具提示，具有“粘性工具提示”选项，可以选择使用 AJAX 加载 HTML 以显示为工具提示（与 HTML/JS 中的内联相反），并处理好大量的工具提示（当然一次只显示一个）。
好吧，我无法为您提供完整的解决方案，但让 div 显示为工具提示非常简单：
(function($){
var $div = $('<div/>').css({
position: 'absolute',
background: 'white',
border: '1px solid black',
padding: '10px',
zIndex: 999,
display: 'none'
}).appendTo('body');
$('a.tooltip')
.mousemove(function(e){
$div.css({
top: e.pageY + 10 + 'px',
left: e.pageX + 10 + 'px'
});
})
.hover(function(){
$div.show().html('Text to display...');
}, function(){
$div.hide();
});
})(jQuery);
一个例子-> http://jsbin.com/emoso
jquery tooltip 插件似乎可以做所有你想做的事。您可以使用bodyHandler: function()来定义工具提示应该是什么。它可以是您定义的 div（甚至可以在即将显示时使用 ajax 填充）参见此处的第二个示例。我不知道粘性工具提示，但这里提供了其他功能。
我真的很喜欢jTip，即使在 ajax 模式下也可以很好地工作，并为内容异步加载外部资源。
好的，我终于有时间重新审视这个，这就是我决定的。总的来说，我对它很满意；我注意到的唯一问题是，如果您在窗口的右下角有一个带有工具提示的元素，这样工具提示就没有空间在元素和窗口边框之间显示，它会出现在顶部当焦点在元素和弹出窗口之间翻转时，元素开始闪烁。欢迎解决这个问题的提示，或对我的 JS 风格的一般评论（我以前写过很少的 JS 代码）。
JavaScript 函数：
function showInfoBox(parent_index, parent) {
var parent_id = $(this).attr('id');
var infobox_id = parent_id+"_ib";
$("body").append("<div class='infobox' id='"+infobox_id+"'><p>This is an infobox for "+parent_id+"</p></div>"); //customize here
var infobox = $("#"+infobox_id);
$(this).mousemove(function(e){
var pad = 10;
var x = Math.min(e.pageX + pad, $(window).width() - infobox.width() - pad);
var y = Math.min(e.pageY + pad, $(window).height() + $(window).scrollTop() - infobox.height() - pad);
infobox.css({
top: y + 'px',
left: x + 'px'
});
})
.hover(function(){
infobox.show();
}, function(){
infobox.hide();
});
};
在文档加载时调用的 JQuery：
$(".SELECTOR-FOR-STUFF-TO-GET-INFOBOXES").each(showInfoBox);
所需的 CSS：
.infobox { display:none; position:absolute; z-index:999; /* more CSS if you like */}
Jquery 中的简单工具提示waqzah.wordpress.com
这是一个很棒的自定义工具提示 https://z-progrock.com/custom-tooltip-using-jquery/