Home/ Questions/Q 7797263
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T23:37:47+00:00

I have the following code. When I mouse over the CODE it should show

  • 0

I have the following code. When I mouse over the “CODE” it should show the div on position 100 X100. It is working fine in IE and Chrome; however the div does not move to the required position in Firefox. What need to be changed in order to make it working?

Note: I am using the following code for positioning the div

$('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })

–Complete Code —

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>Test</title>

<style type="text/css">

    .tooltip

    {

        background-color: Orange;

        position: absolute;

        border-style: solid;

        border-width: 2px;

        border-bottom: solid 2px black;

    }

</style>

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script type="text/javascript">





    function showDiv(batchId, vendorId) {



        tooltip.style.display = "block";

        batch.innerHTML = batchId;

        vendor.innerHTML = vendorId;

        $('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })

    }



</script>

</head>

<body>

<div>

    <div>

        <table cellspacing="0" rules="all" border="1" id="MainContent_grdTooltip" style="border-collapse: collapse;">

            <tr>

                <th scope="col">MainID</th>

                <th scope="col">SecondID</th>

                <th scope="col">CODE</th>

            </tr>

            <tr>

                <td>101</td>

                <td>999999991</td>

                <td onmouseover="showDiv(101,999999991)">55789</td>

            </tr>

        </table>

    </div>

    <div id="tooltip" class="tooltip">

        <table>

            <tr>

                <td>Main Id:</td>

                <td id="batch"></td>

            </tr>

            <tr>

                <td>Second Id:</td>

                <td id="vendor"></td>

            </tr>

        </table>

    </div>

</div>

</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is a jsfiddle that demonstrates your code.

    http://jsfiddle.net/6GaEA/1/

    The problem (according to firebug) lies in your script. You reference a variable ‘tooltip’ that’s not defined. Chrome and IE seem to swallow this error and continue, while firefox chokes and dies.

    change this:

     function showDiv(batchId, vendorId) {

    tooltip.style.display = "block";

    batch.innerHTML = batchId;

    vendor.innerHTML = vendorId;

    $('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })

}

    to this:

    function showDiv(batchId, vendorId) {

    $('#tooltip').css('display',"block");

    $('#batch').html(batchId);

    $('#vendor').html(vendorId);

    $('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })

}

    edit: I am aware that the jQuery css function is called on $(“#tooltip”) twice. I was trying to keep the same flow of the code as much as possible 🙂

    • 0