将jQuery自定义图像工具提示添加到jsTree [英] Adding jQuery custom image tool tip to jsTree
问题描述
这基本上是对这个问题
我正在尝试向jstree添加自定义工具提示，如果它们鼠标悬停在图像文件上，则显示缩略图。它应该使用节点的href值来标记缩略图并将其粘贴在工具提示中。参考上面提到的帖子，我设法让它显示一些任意的文本工具提示，但这显然不是我想要的。
I am trying to add custom tool tips to a jstree which show thumbnails of the image files if they mouse over them. It should use the node's a href value to mark up thumbnail and stick it in a tool tip. Referencing the above-mentioned post, I have managed to get it to show some arbitrary textual tool tip, but that is obviously not what I want.
如果我只是简单地将工具提示添加到img标签或标签中，我怀疑这是一个问题。但是，我正在尝试为一个埋藏在一堆jstree节点中的链接创建一个自定义工具提示。
If I were simply adding the tool tip to an img tag or an a tag by themselves, I doubt this would be an issue. But, I'm trying to create a custom tool tip for a link that's buried in a bunch of jstree node stuff.
例如：
.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);
})
做得很好......只是给我一个文字工具提示。但是我真的不知道从哪里开始，我已经在墙上敲打了好几个小时了，在互联网上寻找可行的解决方案。
does a fine job of ... just giving me a text tool tip. But I really don't know where to go from here, I have been beating my head against a wall for hours now, scouring the internet for viable solutions.
$(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文档，但我仍然很擅长这一点，而且很明显我无法通过蛮力和无知的方式进入解决方案。
All I know is nothing I've tried has worked. I read all of the API docs for the JQuery tool tip plug in, but I'm still pretty new at this and it's become apparent that I won't be able to brute-force-and-ignorance my way into a solution.
UPDATE
所以我修改了代码如下：
So I have revised the code as follows:
.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);
});
并且它的工作原理可行。现在我需要实际弄清楚如何获取MOUSE POINTER坐标，而不是NODE坐标。我将鼠标悬停在列表中的每个图像，工具提示进一步显示在右侧。我正在想办法用鼠标指针显示它。
and it works..ostensibly. NOW I need to actually figure out how to get the MOUSE POINTER coordinates, not the NODE coordinates. Every image I mouse over down the list, the tool tip shows further and further to the right. I'm figuring out a way to show it AT the mouse pointer.
最后更新
//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;
推荐答案
由于您无法将图片或其他自定义内容放入 title 属性，您需要自己创建工具提示。这可以通过简单地在下面使用自定义内容悬停的 div 来完成。下面的代码段显示了如何做到这一点。
Since you cannot put images or other custom content in the title attribute, you will need to create the tooltip yourself. This can be done by simple positioning a div below where your hovering with the custom content. The below snippet shows how this can be done.
$(document).ready(function() {
var mouse_x = 0;
var mouse_y = 0;
$(document).mousemove(function(event) {
mouse_x = event.pageX;
mouse_y = event.pageY;
});
$('#custom_image_content').hide(); // Make sure the custom content does not show by default.
$('#jsTreeTest').jstree({
'core': {
'check_callback': true,
},
'plugins': ["checkbox", "dnd", "contextmenu"]
})
.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);
$('#custom_image_content').find('img').attr('src', url);
$('#custom_image_content')
.css('position', 'absolute')
//.css('top', $node.position().top + 20) // Add about 20 to ensure the div is not hovered when we re-position it.
//.css('left', $node.position().left)
.css('top', mouse_y)
.css('left', mouse_x)
.show();
})
.on('dehover_node.jstree', function() {
$('#custom_image_content').hide(); // Need to hide tooltip after we change hover targets.
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/themes/default/style.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/themes/default-dark/style.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/jstree.min.js"></script>
<body>
<form id="form1" runat="server">
<div>
<div id="jsTreeTest">
<ul>
<li>Test
<ul>
<li>SubDir1
<ul>
<li><a href='https://www.google.com/images/srpr/logo11w.png'>File1.txt</a>
</li>
</ul>
</li>
<li>SubDir2
<ul>
<li>SubSubDir1
<ul>
<li><a href='https://www.google.com/images/srpr/logo11w.png'>File1.txt</a>
</li>
<li><a href='#'>File2.txt</a>
</li>
</ul>
<li><a href='https://www.google.com/images/srpr/logo11w.png'>File2.txt</a>
</li>
<li><a href='https://www.google.com/images/srpr/logo11w.png'>File3.txt</a>
</li>
</ul>
</li>
<li><a href='https://www.google.com/images/srpr/logo11w.png'>File4.txt</a>
</li>
<li><a href='https://s.yimg.com/rz/l/yahoo_en-US_f_p_142x37.png'>File5.txt</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</form>
<div id="custom_image_content">This is my custom content
<img src="" />
</div>
</body>
编辑：使用鼠标y和x位置更新工具提示放置。
Updated with mouse y and x positions for tooltip placement.
这篇关于将jQuery自定义图像工具提示添加到jsTree的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
