PopUp window on hover
<ul>
<li>My Problem:</li>
</ul>

<p>I have my requirement of showing the popup window on hover of a html element.
Very important part of this implementation is, the popup should be visible even on hover of the popup window itself.</p>

<ul>
<li>Tried To implement:</li>
</ul>

<p>For me the popup window is showing On hover of the target element. It is also showing on hover of the popup window. But the problem is I am only able to show the popup on hover of the popup if it is just near the target element. But if I want the hover popup to be little more in distance to the target element, the popup is getting disappeared when i bring my cursor to it. Any body implemented this scenarion?</p>

<p>I am using jQuery.
Following code can be reffered:</p>

<pre><code>//Catching the mouse over event and showing the hover popup.
    $("div[id^=RestInformationHolder_div] &gt; a").hover(
        function() {
            var control = this.id;
            var POP = this.parentNode.parentNode;
            var assetType=$("#" + POP.id).attr('_assetType');
            fillPopupContent(control, assetType);
            positionDivToTarget(this);
            showElement("restRowAnchorPopup");
        },
        function() {
            $("#restRowAnchorPopup").hover(
                function() {
                    showElement("restRowAnchorPopup");//"restRowAnchorPopup" is the popup div id.
                },
                function() {
                    hideElement("restRowAnchorPopup");
                }
            );
            hideElement("restRowAnchorPopup");
        }
    );
}

function fillPopupContent(targetElementId, assetType) {
    //Fill the content in the popup div.
}

function positionDivToTarget(targetElement) {
    var posArray = getPositionToBody(targetElement);
    var offsetLeft = posArray[0] + targetElement.offsetWidth * 1 / 3;
    var offsetTop = posArray[1] + targetElement.offsetHeight;

    $("#restRowAnchorPopup").css({ "top": offsetTop, "left": offsetLeft });
}

function showElement(elementId) {
    $("#" + elementId).css("display", "block");
}

function hideElement(elementId) {
    $("#" + elementId).css("display", "none");    
}

function getPositionToBody(targetHtmlElement) {
//Returns the relative position of the target element.
}
</code></pre>

<p>Any help is appreciated.</p>

<p>Thanks in Advance.
Subrat.</p>
