Adding jQuery tooltip for custom image in jsTree

Question

This is basically a continuation of this issue.

I am trying to add custom tool tips in jstree that show thumbnails of image files if they run on them. It should use the value of node a href to mark the thumbnail and insert it into the tooltip. Turning to the above post, I managed to get him to show some kind of arbitrary text hint, but this is obviously not what I want.

If I just added a hint to the img tag or the tag myself, I doubt it would be a problem. But I'm trying to create a custom hint for a link that looks like a bunch of jstree node.

For instance:

.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 great job ... just giving me a text hint. But I really don't know where to go from here, for hours I hit my head against the wall, trying to find the Internet for sustainable 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 what I tried. I read all the API docs for the JQuery tool tip plug, but I'm still pretty new to this, and it has become obvious that I will not be able to brute force and ignorance to enter into a solution.

UPDATE

So, I 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 .... NOW I need to figure out how to get the MOUSE POINTER coordinates, not the node coordinates. Each image that I cursor down the list, the tooltip goes further and further to the right. I figure out a way to show this on 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 a tooltip yourself. This can be done by simply positioning the div below where you are hanging with custom content. The snippet below 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 positions y and x to place a tooltip.