Cómo crear un div emergente sobre el mouse y quédese cuando haga clic

Intento crear una ventana emergente que pueda mostrar cuando el mouse pase sobre ella y permanecerá cuando haga clic en el enlace. El problema es que ya hago que la ventana emergente aparezca cuando el mouse sobre ella pero desaparecerá cuando el mouse se vaya. ¿Cómo puedo? Hago que la ventana emergente permanezca visible cuando se hace clic. Este es mi código:

HTML

Job Info Search

WRKNo :

Result

Customer Name :

Caller Number :

Complosed :

Cate :

Det :

Feedback :

WRKNo :

This is a popbox test. Hover here 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

   $(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); }); });  

¿Alguna idea de cómo puedo hacer esto?

Prueba esto:

 $('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 aquí.

Use el método de clic en jquery, así que como $('a.popper').click(); y pasa los parámetros en el método click que tienen el popup show, similar a como estás usando el método hover y el método mouseover