Show DIV on mouse over hover

Question

I want the DIV to be displayed and displayed by the mouse cursor when the user hovers over the SPAN or DIV.

I made this function, but it does not work (jquery loaded).

function ShowHoverDiv(divid){ function(e){ var left = clientX + "px"; var top = clientY + "px"; $("#"+divid).toggle(150).css("top",top).css("left",left).css("position","fixed"); return false; } } <div id="divtoshow" style="display:none">test</div> <br><br> <span onmouseover="ShowHoverDIV('divtoshow')">Mouse over this</span> 

Answer 1

You are there a lot:

 <div id="divtoshow" style="position: fixed;display:none;">test</div> <br><br> <span onmouseover="hoverdiv(event,'divtoshow')" onmouseout="hoverdiv(event,'divtoshow')">Mouse over this</span> 

And for JS:

 function hoverdiv(e,divid){ var left = e.clientX + "px"; var top = e.clientY + "px"; var div = document.getElementById(divid); div.style.left = left; div.style.top = top; $("#"+divid).toggle(); return false; } 

Answer 2

I quickly installed this example, starting with the code of Dushan Radoevich:

 $("#spanhovering").hover(function(event) { $("#divtoshow").css({top: event.clientY, left: event.clientX}).show(); }, function() { $("#divtoshow").hide(); }); 

jsfiddle

Answer 3

Actually, I prefer the imperative answer. I have no privileges to add a comment to his post, so here is his code configured to make it a little more adaptable:

 $(".spanhover").hover(function(event) { var divid = "#popup" + $(this).attr("id") $(divid).css({top: event.clientY, left: event.clientX}).show(); }, function() { var divid = "#popup" + $(this).attr("id") $(divid).hide(); }); 

http://jsfiddle.net/SiCurious/syaSa/

You need to be a little smarter with your div and span identifier conventions.

Answer 4

 $('#divToShow,#span').hover(function(e){ var top = e.pageY+'px'; var left = e.pageX+'px' $('#divToShow').css({position:'absolute',top:top,left:left}).show(); }, function(){ $('#divToShow').hide(); }); <div id="divToShow" style="display:none">test</div> <br/><br/> <span id="span" >Mouse over this</span> 

I think this code will be useful for your case.