How To Create A Pop-up Div On Mouse Over And Stay When Click

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

Solution 1:

Try this:

$('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'));
    if (!($("a.popper").hasClass("show"))) {
        $(target).hide(); //dont hide popup if it is clicked
    }
});
$('a.popper').click(function (e) {
    var target = '#' + ($(this).attr('data-popbox'));
    if (!($(this).hasClass("show"))) {
        $(target).show();
    }
    $(this).toggleClass("show");
});

FIDDLE here.

Solution 2:

Use the click method in jquery, so like $('a.popper').click(); and pass in parameters in the click method that have the popup show, similar to how you are using the hover method and the mouseover method