PopUp window on hover.

Question

Hi,

• My Problem:

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.

• Tried To implement:

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?

I am using jQuery. Following code can be reffered:

//Catching the mouse over event and showing the hover popup.
    $("div[id^=RestInformationHolder_div] > 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.
}

Any help is appreciated.

Thanks in Advance. Subrat.

Answer 1

Not a direct answer but you can trim these two functions down:

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

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

//just call
$('#elementId').show();

$('#elementId').hide();

Answer 2

Too lazy at the moment to code it for you but main idea is

1. User hovers your RestInformationHolder_div element
2. Show restRowAnchorPopup
3. User leaves RestInformationHolder_div element -> mouseout fires
4. You start a timer with timerid = setTimeout(hidesPopup(), 1000) change time to what fits you
5. If users hovers popup before timer runs out you cancelTimeout(timerid)
6. Else hidesPopup() is run and hides the popup

You can of course finetune this a bit more and make hidesPopup() hide the popup gradually with a "slow" opacity fadeout and if the users moves in while it is hiding you stop the animation and set the opacity back.

---

Demopage: http://jsbin.com/apaxa

Codeview of demopage http://jsbin.com/apaxa/edit