【发布时间】：2015-07-14 21:55:23
【问题描述】：
这基本上是对this question的跟进
我正在尝试向 jstree 添加自定义工具提示，如果鼠标悬停在图像文件上，则会显示图像文件的缩略图。它应该使用节点的 a 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 文档，但我在这方面还是很陌生，很明显，我无法通过蛮力和无知的方式进入解决方案。
更新
所以我将代码修改如下：
.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;
【问题讨论】：
-
在jQuery .mouseenter 事件中，e 参数包含鼠标位置数据，但在jstree_hover 事件中似乎不是这样。
-
那是我最初尝试的方法，但 e.pageX 和 e.pageY 由于某种原因返回 undefined。
-
我是个笨蛋。如果我将正确的属性分配给正确的变量，将会有所帮助。我将顶部位置分配给 x，将左侧位置分配给 y。难怪它正在做它正在做的事情。
标签： jquery jquery-ui jquery-plugins jstree