Home/ Questions/Q 510919
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T07:09:47+00:00

I want to display div above image so that div’s top is aligned with

  • 0

I want to display div above image so that div’s top is aligned with cursor.
As cursor is moved, the div should be moved as well (right now just vertically).
In IE (pure javascript please).

<head runat="server">
    <title></title>
    <style type="text/css">
       #ToolTip{position:absolute; width: 200px;background-color:Lime; top: 0px; left: 0px; z-index:400;visibility:hidden;}
    </style>
    <script language="javascript" type="text/javascript">
        function On() {

            MoveToolTip("ToolTip", "event.y", "event.x");
            document.getElementById('ToolTip').style.visibility = 'visible';

        }
        function Off() {

            MoveToolTip("ToolTip", 0, 0);
            document.getElementById('ToolTip').style.visibility = 'hidden';
        }

        function MoveToolTip(layerName, top, left) {
               document.getElementById(layerName).style.top = (eval(top));
             //document.getElementById(layerName).style.left = (eval(left) - 360);

        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="ToolTip" >This is a test </div>   
        <a href="www.www.com"><img alt="mg" border="0" src="http://www.google.com/logos/holiday09_4.gif"  onmouseout="Off();" onmouseover="On();" /></a>

    </div>
    </form>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s a possible fix for your problem:

    <html>
<head runat="server">
<title></title>
<style type="text/css">
    #ToolTip {
        position:absolute; 
        width: 200px;
        background-color:Lime;
        z-index:400;
        visibility:hidden;
        cursor: pointer;
    }
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="ToolTip">This is a test</div>
        <a href="www.www.com">
            <img alt="mg" id="base-img" border="0" src="http://www.google.com/logos/holiday09_4.gif" />
        </a>
    </div>
    </form>
<script language="javascript" type="text/javascript">
    function showToolTip(e) {
        e = e || window.event; // Older versions of IE handle events funny
        // Added code that compensates for the window's scroll position.
        var top = e.clientY + (window.pageYOffset || document.body.scrollTop) + 5;
        moveToolTip("ToolTip", top, e.clientX);
        document.getElementById('ToolTip').style.visibility = 'visible';

        // We need to cancel the center to ensure that the onmousemove event 
        // on the body element doesn't get triggered
        e.cancelBubble = true;
        if (e.stopPropagation) { e.stopPropagation(); }
        return false;
    }
    function hideToolTip() {
        moveToolTip("ToolTip", 0, 0);
        document.getElementById('ToolTip').style.visibility = 'hidden';
        return false;
    }

    function moveToolTip(layerName, top, left) {
        document.getElementById(layerName).style.top = (top + "px");
    }

    document.onmousemove = hideToolTip;
    document.getElementById("ToolTip").onmousemove = showToolTip;
    document.getElementById("base-img").onmousemove = showToolTip;
</script>
</body>
</html>

    Things I changed:

    • Gave functions more readable names:
      • Renamed On to showToolTip
      • Renamed Off to hideToolTip
    • The event variable is now passed to the showToolTip function. This is needed to get the cursor’s x, y position
    • Added code that compensated for the window’s scroll position
    • Added return false to showToolTip and hideToolTip
    • Replaced onmouseout and onmouseover with the more widely supported onmousemove event
    • Got rid of the flicker by adding the following:
      • Added onmousemove event to document, which calls hideToolTip
      • Added onmousemove event to the tool tip div, which calls showToolTip
    • Added + "px" statement to the .style.top assignment. Some browsers get confuse if you assign an integer to a style.
    • Moved script declarations to the bottom of the page.
    • Moved event assignments to javascript and removed onmousemove attributes from the markup
    • Added the cursor: pointer style to the tool tip. This removes cursor flicker.
    • Changed code format

    I’ve also posted a working example: http://www.the-xavi.com/static/so-hover-div.html

    Hope this helps.

    • 0