Popup disappear on mouse over

Question

I am trying to display address on map on popup's as shown below in the image.

Image of popup:

When I hover mouse on pin icon the popup appears but when I move to popup it disappear.

Javascript I am using:

  <script>

        jQuery(function($) {
  var pop = $('.map-popup');
  pop.click(function(e) {
    e.stopPropagation();
  });

  $('a.marker').hover(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).next('.map-popup').toggleClass('open');
    $(this).parent().siblings().children('.map-popup').removeClass('open');
  });

  $(document).click(function() {
    pop.removeClass('open');
  });

  pop.each(function() {
    var w = $(window).outerWidth(),
        edge = Math.round( ($(this).offset().left) + ($(this).outerWidth()) );
    if( w < edge ) {
      $(this).addClass('edge');
    }
  });
});



    </script>

Code Pen link: codepen

Answer 1

Instead of

$('a.marker').hover(function(e) {

use

$('a.marker').mouseenter(function(e) {

hover handles both mouseenter and mouseleave events. If you don't pass a handler for mouseleave, it will execute the function for mouseenter, so in your case,

$(this).next('.map-popup').toggleClass('open');

is executed again for mouseleave so the popup gets hidden. Read more here .