jquery - 向 jsTree 添加 jQuery 自定义图像工具提示

Question

这基本上是 this question 的后续行动。

我正在尝试向 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 文档，但我对此还很陌生，而且很明显，我无法通过暴力和无知的方式找到解决方案。

更新

所以我将代码修改如下:

.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;

Answer 1

由于您无法将图像或其他自定义内容放入 title 属性中，因此您需要自己创建工具提示。这可以通过简单地将 div 放置在您将自定义内容悬停的位置下方来完成。下面的代码片段展示了如何做到这一点。

$(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 位置。