To create a movable div(which is visible only after mousehovering of other div) with scrolling

My Script for hide and show:

function SetVisible(testId) {
    var obj = document.getElementById(testId);
    var parent = obj.parentNode;
    obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';
}

function HideContent(testId) {
    var obj = document.getElementById(testId);
    obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
}

HTML body content:

<div style="position:relative" onmouseover="SetVisible('hideShow');" onmouseout="HideContent('hideShow');">Check your question

    <div class="hideShow" id="hideShow" name="hideShow" style="position: absolute; z-index: 1000; line-height: 15px; font-size: 12px; color: rgb(90, 89, 89); font-family: verdana; visibility: hidden; left: 100%; top: 10%;">
        <table><tr><td>abc</td></tr><tr><td>abc</td></tr><tr><td>abc</td></tr><tr><td>abc</td></tr><tr><td>abc</td></tr><tr><td>abc</td></tr><tr><td>abc</td></tr><tr><td>abc</td></tr><tr><td>abc</td></tr><tr><td>abc</td></tr><tr><td>abc</td></tr><tr><td>abc</td></tr><tr><td>abc</td></tr><tr><td>abc</td></tr><tr><td>abc</td></tr><tr><td>abc</td></tr><开发者_运维技巧/table>
    </div>

</div>

Question is that I've to write a script to show the complete contents of "hideShow" div without scrolling the page means only this div should adjust itself as according to the space available on page. So, I don't want any scrolling of page on mousehover on "Check your question" to show the div contents, I just want to make the div self adjustable according to the available space on the page nearby "check your question". Thanks

---

http://www.jtricks.com/javascript/navigation/floating.html there you'll find the way to move the div along with the scrolling, now I want to make this code simple and easier in javascript. If you can convert this code into simpler javascript then please do.