I'm trying to create popup that can show when mouse over it and will stay when click on the link .The problem is I already make the popup will show up when the mouse over it but it will disappear when the mouse leave .How can I make the popup will stay show up when clicked .This is my code :

**HTML**

```
<div id="pop1" class="popbox">
    <h2>Job Info Search</h2>
    <h2>WRKNo : <input type="text"  /></h2>
    <h2>Result</h2>
    <p>Customer Name : <input type="text"  /></p>
    <p>Caller Number : <input type="text"  /></p>
    <p>Complosed : <input type="text"  /></p>
    <p>Cate : <input type="text"  /></p>
    <p>Det : <input type="text"  /></p>
    <p>Feedback : <input type="text"  /></p>
    <p>WRKNo : <input type="text"  /></p>
</div>

This is a popbox test.  <a href="#" class="popper" data-popbox="pop1">Hover here</a> to see how it works.

```

**CSS**

```
.popbox {
    display: none;
    position: absolute;
    z-index: 99999;
    width: 400px;
    padding: 10px;
    background: #EEEFEB;
    color: #000000;
    border: 1px solid #4D4F53;
    margin: 0px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
    box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
}
.popbox h2
{
    background-color: #4D4F53;
    color:  #E3E5DD;
    font-size: 14px;
    display: block;
    width: 100%;
    margin: -10px 0px 8px -10px;
    padding: 5px 10px;
}

```

**Javascript**

```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
    var moveLeft = 0;
    var moveDown = 0;
    $('a.popper').hover(function(e) {

        var target = '#' + ($(this).attr('data-popbox'));

        $(target).show();
        moveLeft = $(this).outerWidth();
        moveDown = ($(target).outerHeight() / 2);
    }, function() {
        var target = '#' + ($(this).attr('data-popbox'));
        $(target).hide();
    });

    $('a.popper').mousemove(function(e) {
        var target = '#' + ($(this).attr('data-popbox'));

        leftD = e.pageX + parseInt(moveLeft);
        maxRight = leftD + $(target).outerWidth();
        windowLeft = $(window).width() - 40;
        windowRight = 0;
        maxLeft = e.pageX - (parseInt(moveLeft) + $(target).outerWidth() + 20);

        if(maxRight > windowLeft && maxLeft > windowRight)
        {
            leftD = maxLeft;
        }

        topD = e.pageY - parseInt(moveDown);
        maxBottom = parseInt(e.pageY + parseInt(moveDown) + 20);
        windowBottom = parseInt(parseInt($(document).scrollTop()) + parseInt($(window).height()));
        maxTop = topD;
        windowTop = parseInt($(document).scrollTop());
        if(maxBottom > windowBottom)
        {
            topD = windowBottom - $(target).outerHeight() - 20;
        } else if(maxTop < windowTop){
            topD = windowTop + 20;
        }

        $(target).css('top', topD).css('left', leftD);

    });

});
</script>

```

Any ideas how I can do this?