这基本上是后续这个问题 https://stackoverflow.com/questions/7096803/jquery-jstree-add-a-tooltip
我正在尝试向 jstree 添加自定义工具提示，如果将鼠标悬停在图像文件上，则会显示图像文件的缩略图。它应该使用节点的 href 值来标记缩略图并将其粘贴在工具提示中。参考上述帖子，我设法让它显示一些任意的文本工具提示，但这显然不是我想要的。
如果我只是将工具提示添加到 img 标签或 a 标签本身，我怀疑这会是一个问题。但是，我正在尝试为隐藏在一堆 jstree 节点内容中的链接创建自定义工具提示。
例如：
.on('hover_node.jstree',function(e,data){
var $node = $("#" + data.node.id);
var url = $node.find('a').attr('href');
$("#" + data.node.id).prop('title', url);
})
做得很好......只是给我一个文本工具提示。但我真的不知道从这里到哪里去，我已经把头撞在墙上几个小时了，在互联网上搜索可行的解决方案。
$(function () {
$(document).tooltip();
$('#treeView').jstree({
'core': {
'multiple': false,
'check_callback': true,
'data': {
'url': 'Temp/ajax.html',
'data': function (node) {
return { 'id': node.id };
}
}
},
'checkbox': {
'three_state': false,
'whole_node': false
},
'plugins': ["checkbox"]
}).on('hover_node.jstree',function(e,data){
var $node = $("#" + data.node.id);
var url = $node.find('a').attr('href');
$("#" + data.node.id).prop({ 'title': url, 'content': '<img src="' + url + '" alt=""/>' });
})
});
我只知道我所尝试的一切都不起作用。我阅读了 JQuery 工具提示插件的所有 API 文档，但我对此还很陌生，而且很明显，我无法通过暴力和无知的方式找到解决方案。
UPDATE
所以我将代码修改如下：
.on('hover_node.jstree', function (e, data) {
var $node = $("#" + data.node.id);
var url = $node.find('a').attr('href');
if (url != '#') {
debugger
//get the mouse position
var x = $node.position().top + 20;
var y = $node.position().left;
$('.tooltip').css({ 'top': y + 'px', 'left': x + 'px' });
$('.tooltip').find('img').attr('src', url);
$('.tooltip').fadeIn(300, 'easeOutSine');
}
}).on('dehover_node.jstree', function () {
$('.tooltip').fadeOut(200);
});
表面上它有效。现在我需要真正弄清楚如何获取鼠标指针坐标，而不是节点坐标。我将鼠标悬停在列表中的每个图像上，工具提示都会显示在右侧越来越远的位置。我正在想办法用鼠标指针显示它。
最后更新
//assigning the right properties to the right
//variables would work wonders for my cause.
var x = $node.position().left;
var y = $node.position().top + 20;
