Question

的跟进

我正在尝试向jstree添加自定义工具提示，如果它们鼠标悬停在图像文件上，则显示图像文件的缩略图。它应该使用节点的href值来标记缩略图并将其粘贴在工具提示中。参考上面提到的帖子，我设法让它显示一些任意的文本工具提示，但这显然不是我想要的。

如果我只是将工具提示单独添加到img标签或标签，我怀疑这是一个问题。但是，我正在尝试为链接创建一个自定义工具提示，这些链接隐藏在一堆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);
        });

它的作用......表面上看。现在我需要实际弄清楚如何获取MOUSE POINTER坐标，而不是NODE坐标。我将鼠标悬停在列表中的每个图像，工具提示进一步显示在右侧。我想出了一种在鼠标指针上显示它的方法。

最后更新

    //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自定义图像工具提示添加到jsTree

0 个答案: