Show DIV at mouse cursor on hover of span

Question

I want a DIV to unhide and appear at the mouse cursor when the user hovers over a SPAN or DIV.

I made this function but it does not work (jquery is 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>

can you use ... function ShowHoverDiv(){ $("#divtoshow").toggle('slow'); } — A.T., Mar 01 '13 at 12:52

score 35 · Accepted Answer · edited Nov 09 '18 at 16:38

35

You're pretty much there:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

edited Nov 09 '18 at 16:38

Maarti

3,600
4
17
34

answered Mar 01 '13 at 14:05

Simon Adcock

3,554
3
25
41

Thanks for that, I almost works! The problem is that the DIV does not appear at the mouse, but about 200px below it and always completely on the left. Why is that? Is it the "display" type? – Mbrouwer88 Mar 07 '13 at 22:10
1

Fixed it with this code: function hoverdiv(e,divid){ var left = e.clientX + "px"; var top = e.clientY + "px"; $("#"+divid).css('left',left); $("#"+divid).css('top',top); $("#"+divid).css('position','fixed'); $("#"+divid).toggle(); return false; } – Mbrouwer88 Mar 07 '13 at 22:20
Hello, I am trying your code and I get the following error :" hoverdiv is not defined at HTMLTableCellElement.onmouseover " – bellotas Mar 07 '18 at 12:30

score 11 · Answer 2 · answered Mar 01 '13 at 13:05

11

i quickly set up this example, starting with Dušan Radojević code:

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

jsfiddle

answered Mar 01 '13 at 13:05

Imperative

3,138
2
25
40

Thanks. But the problem now is that I have a dynamic amount of DIV's to show. What I mean to say if that I create a real function to call on the mouseoverevent of a SPAN or DIV, I can use variables and so on to load specific content in the div. Sorry for being a noob. – Mbrouwer88 Mar 01 '13 at 13:09
1

you didn't point this out in your initial post, please update it and provide some code of what you already did to accomplish your goal. mainly you want to do something like this: `$('.my_custom_td').hover(/* ... */);` – Imperative Mar 01 '13 at 13:25

score 1 · Answer 3 · answered Mar 01 '13 at 14:25

Actually, I much prefer Imperative's answer. I don't have privs to add a comment to his post, so here is his code, tweaked to make it slightly 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 will need to be a bit clever with your div and span id naming conventions.

misoukrane · Answer 4 · 2013-03-01T15:02:16.937

0

$('#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.

edited Mar 01 '13 at 15:02

answered Mar 01 '13 at 14:54

misoukrane

304
2
3

Show DIV at mouse cursor on hover of span

4 Answers4

Linked