Javascript mouseenter, mouseleave, mousemove

donboe · June 30, 2015, 4:11pm

I have the following function to create a sort of tooltip:

$(function() {
  var moveLeft = 20,
      moveDown = -20,
      currentDiv;

  $(".shopping_cart").on({
    mouseenter: function (e) {
      currentDiv = $(this).parent().find('div.details')
      currentDiv.show();
    },
    mouseleave: function (e) {
      currentDiv.hide();
    },
    mousemove: function(e) {
      currentDiv
      .css('top', e.pageY + moveDown)
      .css('left', e.pageX + moveLeft)
    }
  }, "a");
});

with the following css:

div.details {
  width: 14rem;
  display: none;
  position: absolute;
  padding: .5rem;
  background: #FFF;
  border: 1px solid #f17000;
  font-size: 90%;
  z-index:9999
}

div.details p {
  width: 100%;
  line-height: 1.5rem;
  font-size: .8rem;
  position: relative;
  font-weight: normal;
}

div.details p span {
  width: 40% !important;
  margin: 0;
  display: inline-block;
  font-weight: 700;
}

and the following html:

<ul id="shopping_cart" class="shopping_cart">
  <li>
    <form action="" method="post" name="shop-form" class="shop-form">
        <a href="#"><img src="/../images/product_photos/thumbnails/hugoboss01.jpg" class="product_image" alt="hugoboss01.jpg"></a>
        <input type="hidden" name="id" value="4" />
        <input type="hidden" name="name" value="Hugo Boss sleehakken" />
        <input type="hidden" name="quantity" value="1" />
        <input type="hidden" name="price" value="25.00" />
        <button type="submit" value="Submit" class="cart_button"><img src="/../images/cart_button.png"></button>
    </form>
    <div class="details">
        <p><span>Product:</span>Hugo Boss sleehakken</p>
        <p><span>Price:</span>25.00</p>
    </div>
  </li>
    
  <li>
    <form action="" method="post" name="shop-form" class="shop-form">
        <a href="#"><img src="/../images/product_photos/thumbnails/amatipumps01.jpg" class="product_image" alt="amatipumps01.jpg"></a>
        <input type="hidden" name="id" value="3" />
        <input type="hidden" name="name" value="Leren designer pumps" />
        <input type="hidden" name="quantity" value="1" />
        <input type="hidden" name="price" value="30.00" />
        <button type="submit" value="Submit" class="cart_button"><img src="/../images/cart_button.png"></button>
    </form>
    <div class="details">
        <p><span>Product:</span>Leren designer pumps</p>
        <p><span>Price:</span>30.00</p>
    </div>
   </li>
</ul>

But the popups are not showing. Does someone see what I’m doing wrong?

Thank you in advance

PaulOB · June 30, 2015, 6:23pm

Hi,

Try this:

Add a wrap around the whole block.

e.g.

<div class="wrap">
		<ul id="shopping_cart" class="shopping_cart">

Then change this section as follows:

 mouseenter: function (e) {
			currentDiv = $(this).closest('.wrap').find('.details')
      currentDiv.show();
    },

Full code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
div.details {
	width: 14rem;
	display: none;
	position: absolute;
	padding: .5rem;
	background: #FFF;
	border: 1px solid #f17000;
	font-size: 90%;
	z-index:9999
}
div.details p {
	width: 100%;
	line-height: 1.5rem;
 font-size: .8rem;
	position: relative;
	font-weight: normal;
}
div.details p span {
	width: 40% !important;
	margin: 0;
	display: inline-block;
	font-weight: 700;
}
</style>
</head>

<body>
<div class="wrap">
		<ul id="shopping_cart" class="shopping_cart">
				<li>
						<form action="" method="post" name="shop-form" class="shop-form">
								<a href="#"><img src="/../images/product_photos/thumbnails/hugoboss01.jpg" class="product_image" alt="hugoboss01.jpg"></a>
								<input type="hidden" name="id" value="4" />
								<input type="hidden" name="name" value="Hugo Boss sleehakken" />
								<input type="hidden" name="quantity" value="1" />
								<input type="hidden" name="price" value="25.00" />
								<button type="submit" value="Submit" class="cart_button"><img src="/../images/cart_button.png"></button>
						</form>
						<div class="details">
								<p><span>Product:</span>Hugo Boss sleehakken</p>
								<p><span>Price:</span>25.00</p>
						</div>
				</li>
				<li>
						<form action="" method="post" name="shop-form" class="shop-form">
								<a href="#"><img src="/../images/product_photos/thumbnails/amatipumps01.jpg" class="product_image" alt="amatipumps01.jpg"></a>
								<input type="hidden" name="id" value="3" />
								<input type="hidden" name="name" value="Leren designer pumps" />
								<input type="hidden" name="quantity" value="1" />
								<input type="hidden" name="price" value="30.00" />
								<button type="submit" value="Submit" class="cart_button"><img src="/../images/cart_button.png"></button>
						</form>
						<div class="details">
								<p><span>Product:</span>Leren designer pumps</p>
								<p><span>Price:</span>30.00</p>
						</div>
				</li>
		</ul>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$(function() {
  var moveLeft = 20,
      moveDown = -20,
      currentDiv;
  $(".shopping_cart").on({
    mouseenter: function (e) {
  
			currentDiv = $(this).closest('.wrap').find('.details')
      currentDiv.show();
    },
    mouseleave: function (e) {
      currentDiv.hide();
    },
    mousemove: function(e) {
      currentDiv
      .css('top', e.pageY + moveDown)
      .css('left', e.pageX + moveLeft)
    }
  }, "a");
});

</script>
</body>
</html>

donboe · June 30, 2015, 8:03pm

Hi Paul. Thank you for the reply. I changed it to what you suggested, but I stll don’t get div.details showing up. This is the entire HTML:


<!doctype html>

<html lang="nl">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Rosa Rosas Amsterdam  | Shop</title>

<meta name="description" content="Accessoires, kleding, schoenen, sieraden en tassen voor vrouwen en meisjes">

<meta name="keywords" content="accessoires,kleding,schoenen,sieraden,tassen">

<meta name="robots" content="index, follow">

<meta name="revisit-after" content="7 days">

<meta property="og:title" content="Rosa Rosas Amsterdam  | Shop">

<meta property="og:description" content="Accessoires, kleding, schoenen, sieraden en tassen voor vrouwen en meisjes">

<link rel="stylesheet" type="text/css" href="/css/website.css" media="screen">

<link rel="stylesheet" type="text/css" href="/css/jquery-ui.min.css" media="screen">

<link rel="stylesheet" type="text/css" href="/css/jquery-ui.theme.min.css" />




</head>

<body id="shop">

<ul class="social">

  <li><a href="https://www.facebook.com/pages/Rosa-Rosas/104479572923908?pnref=lhc" title="Like Rosa Rosas op Facebook" target="_blank"><img src="/images/facebook.png" alt="Like Rosa Rosas op Facebook"></a></li>

  <li><a href="https://www.pinterest.com/rosarosas/" title="Pin Rosa Rosas op Pinterest" target="_blank"><img src="/images/pinterest.png" alt="Pin Rosa Rosas op Pinterest"></a></li>

  <li><a href="https://instagram.com/rosarosasvintage/" title="Vindt Rosa Rosas op Instagram" target="_blank"><img src="/images/instagram.png" alt="Vindt Rosa Rosas op Instagram"></a></li>

  <li><a href="/contact" title="Neem contact op met Rosa Rosas"><img src="/images/email.png" alt="Neem contact op met Rosa Rosas"></a></li>

</ul><div id="wrapper">

<header id="header">

    <section id="logo">

    <a href="/"><img src="/images/logo.png"></a>

  </section>

   


  <ul id="menu">

    <li><a href="/" title="Rosa Rosas homepage" class="home" target="">Home</a></li>

    <li><a href="/shop" title="Accessoires, kleding, schoenen en tassen" class="shop" target="">Shop</a></li>

    <li><a href="/over" title="Informatie over Rosa Rosas" class="over" target="">Over Rosa Rosas</a></li>

    <li><a href="/nieuws" title="Nieuws over Rosa Rosas" class="nieuws" target="">Nieuws</a></li>

    <li><a href="/fotos" title="Foto's van Rosa Rosas" class="fotos" target="">Foto's</a></li>

    <li><a href="/locatie" title="Adres en locatie Rosa Rosas" class="locatie" target="">Waar & Wanneer</a></li>

    </ul>

</header> 

<main id="main">

<section id="content">

  <h1>schoenen <a href="/shop/cart" title="" class="cart">Mijn winkelwagentje&nbsp;( 0 )</a></h1>  

  <div id="navigation">

    <div id="aantal">

      <label>Per pagina&nbsp;</label>

      <select name="count" id="count">

        <option value="9">9</option>

        <option value="12">12</option>

        <option value="15">15</option>

      </select> 

     </div>

  </div>

  <div class="wrap"> 

  <ul id="shopping_cart" class="shopping_cart">

        <li>

    <form action="" method="post" name="shop-form" id="shop-form">

        <a href="#"><img src="/../images/product_photos/thumbnails/hugoboss01.jpg" class="product_image" alt="hugoboss01.jpg"></a>

        <input type="hidden" name="id" value="4" />

        <input type="hidden" name="name" value="Hugo Boss sleehakken" />

        <input type="hidden" name="quantity" value="1" />

        <input type="hidden" name="price" value="25.00" />

        <button type="submit" value="Submit" class="cart_button"><img src="/../images/cart_button.png"></button>

        </form>

    <div class="details">

        <p><span>Product:</span>Hugo Boss sleehakken</p>

        <p><span>Price:</span>25.00</p>

    </div>

   </li>    

        <li>

    <form action="" method="post" name="shop-form" id="shop-form">

        <a href="#"><img src="/../images/product_photos/thumbnails/amatipumps01.jpg" class="product_image" alt="amatipumps01.jpg"></a>

        <input type="hidden" name="id" value="3" />

        <input type="hidden" name="name" value="Leren designer pumps" />

        <input type="hidden" name="quantity" value="1" />

        <input type="hidden" name="price" value="30.00" />

        <button type="submit" value="Submit" class="cart_button"><img src="/../images/cart_button.png"></button>

        </form>

    <div class="details">

        <p><span>Product:</span>Leren designer pumps</p>

        <p><span>Price:</span>30.00</p>

    </div>

   </li>    

      </ul>

  </div>

  


</section>




<section id="sidebar">

  <h2>Per categorie</h2>

  <ul id="sidebar_nav">

    <li><a href="/shop">Alle producten</a></li>

        <li><a href="/shop/categorie/accessoires" title="Accessoires" class="accessoires">Accessoires</a></li>

        <li><a href="/shop/categorie/kleding" title="Kleding" class="kleding">Kleding</a></li>

        <li><a href="/shop/categorie/schoenen" title="Schoenen" class="schoenen">Schoenen</a></li>

        <li><a href="/shop/categorie/tassen" title="Tassen" class="tassen">Tassen</a></li>

      </ul>

</section>

</main>  

</div>




<footer id="footer">

  <p class="copyright">Copyright &copy; 2010 - 2015<span><img src="/images/logo_footer.png"></span>. All rights reserved.</p>

<p class="credits">Design, ontwikkeling en hosting <a href="http://www.donaldboers.nl" target="_blank">Donald Boers</a>&nbsp;|&nbsp;Logo <a href="http://mikelduyts.nl/" target="_blank">Mikel Duyts</a></p>    

</footer>

<div id="bericht" style="display: none; z-index: 100000;"></div>

<script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="/js/jquery-ui.min.js"></script>

<script type="text/javascript" src="/js/jPages.min.js"></script>

<script type="text/javascript" src="/js/jquery.fancybox.js"></script>

<script type="text/javascript">

$("body").fadeIn(1500);




$(".fancybox").fancybox({

    helpers : {

        title: {

            type: 'inside'

        }

    }

});




$("div.holder").jPages({

	containerID: "gallery",

	previous   : "vorige",

	next       : "volgende",

	perPage    : 9

});




$(function() {

  var moveLeft = 20,

      moveDown = -20,

      currentDiv;

  $(".shopping_cart").on({

    mouseenter: function (e) {

  


			currentDiv = $(this).closest('.wrap').find('.details')

      currentDiv.show();

    },

    mouseleave: function (e) {

      currentDiv.hide();

    },

    mousemove: function(e) {

      currentDiv

      .css('top', e.pageY + moveDown)

      .css('left', e.pageX + moveLeft)

    }

  }, "a");

});







$(function () {

	$("#bericht").dialog({

		autoOpen: false,

		modal: true,

		title: "Details",

		zIndex: 3999,

		dialogClass: 'no-close',

		class: 'dialog_button',

		buttons: {

			Close: function () {

				$(this).dialog('close');

				setTimeout(function(){window.location = window.location}, 2000);

			}

		},

		open: function (e, ui) {

			$(this).parent().find(".ui-dialog-buttonpane .ui-button").addClass("dialog_button");

		}

	});

});




$("#shop-form").on("submit", function(e) {

	e.preventDefault();

	$.ajax({

		url : "/shop/add_product",

		type: "post", 

		data: $(this).serialize(),

		success: function(data) {

			$("#bericht").html($(data));

			$("#bericht").dialog("open");	

		}

	});

});




$("#cart-form").on("submit", function(e) {

	e.preventDefault();

	$.ajax({

		url : "/shop/remove_product",

		type: "post",

		data: $(this).serialize(),

		success: function(data){

			$("#bericht").html($(data));

			$("#bericht").dialog("open");

		}

	});

});




$("#contact_form").on("submit", function(e) {

	e.preventDefault();

	$.ajax({

		url : "/connect",

		type: "post",

		data: $(this).serialize(),

		success: function(data) {

			$("#send_status").html($(data).fadeIn(1000));

			$("#contact_form").fadeOut(1000);

			$("#contact_form")[0].reset();

		}

	});

});

</script>

</body>

</html>

Do you need to see the css as well?

PaulOB · July 1, 2015, 7:51am

You didn’t add the wrap div

donboe · July 1, 2015, 9:14pm

Hi Paul.

Yes I did

PaulOB · July 2, 2015, 8:44am

Sorry, I missed that. Can’t see for looking.

If I take your code above and strip out the other js that is above the tooltip code then it is working ok so there must be an issue with those scripts that is interfering or causing an error before it gets to that routine.

What error do you get in the error console?

donboe · July 3, 2015, 5:32am

Hi Paul. Thanks for the responce.

No worries

I just did that as well, but without result. I see the divs in the source but they don’t show on :hover

The console isn’t giving me any error

PaulOB · July 3, 2015, 8:13pm

We’ll need to see the page

If you don;t have a link then if you take my full code from #post2 you can see how it is supposed to work as that is a full working demo and then maybe you can work backwards from there

system · October 3, 2015, 3:26am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.