this follow on this question
i trying add custom tool tips jstree show thumbnails of image files if mouse on them. should use node's href value mark thumbnail , stick in tool tip. referencing above-mentioned post, have managed show arbitrary textual tool tip, not want.
if adding tool tip img tag or tag themselves, doubt issue. but, i'm trying create custom tool tip link that's buried in 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 fine job of ... giving me text tool tip. don't know go here, have been beating head against wall hours now, scouring internet 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 know nothing i've tried has worked. read of api docs jquery tool tip plug in, i'm still pretty new @ , it's become apparent won't able brute-force-and-ignorance way solution.
update
so have revised code follows:
.on('hover_node.jstree', function (e, data) { var $node = $("#" + data.node.id); var url = $node.find('a').attr('href'); if (url != '#') { debugger //get 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 works..ostensibly. need figure out how mouse pointer coordinates, not node coordinates. every image mouse on down list, tool tip shows further , further right. i'm figuring out way show @ mouse pointer.
last update
//assigning right properties right //variables work wonders cause. var x = $node.position().left; var y = $node.position().top + 20;
since cannot put images or other custom content in title attribute, need create tooltip yourself. can done simple positioning div below hovering custom content. below snippet shows how can 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 custom content not show 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 20 ensure div not hovered when 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 hide tooltip after 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 custom content <img src="" /> </div> </body>edit: updated mouse y , x positions tooltip placement.
Comments
Post a Comment