Adding jQuery custom image tool tip to jsTree

Question

This is basically a follow up on this question

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.

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.

For example:

    .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=""/>' });
        })            
    });

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);
        });

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.

LAST UPDATE

    //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

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>

EDIT: Updated with mouse y and x positions for tooltip placement.