How do I Trigger this CSS Animation with Jquery?

Question

I had this working without jquery, but the problem was that the tooltip was appearing on the whole div rather than just the PNG.

The mouseover function worked well with jquery so I decided to switch to that, however I do not know how to trigger the CSS animation when the mouseover function runs.

 $('#cookie').mouseover(function() { //$('#tooltip').removeClass('.cookieToolTip'); $('#tooltip').addClass('.cookieToolTipHovered'); }); // I also have some code to move the tooltip wherever the cursor is: var tooltip = document.querySelectorAll('.cookieToolTip'); document.addEventListener('mousemove', fn, false); function fn(e) { for (var i = tooltip.length; i--;) { tooltip[i].style.left = e.pageX + 'px'; tooltip[i].style.top = e.pageY + 'px'; } } 

 .cookieToolTipHovered { visibility: visible; opacity: 1; } .cookieToolTip { background: #C8C8C8; margin-left: 28px; padding: 10px; position: absolute; z-index: 1000; width: 200px; height: 50px; opacity: 0; visibility: hidden; transition: opacity 1s; border: 1px solid black; border-radius: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="zoomin"> <img id="cookie" oncontextmenu="return false" ondragstart="return false" src="http://www.pngall.com/wp-content/uploads/2016/07/Cookie-Download-PNG.png" /> <span class="cookieToolTip" id="tooltip">This is a picture of a cookie.</span> </div> 

Answer 1

You can change the CSS - you may want to hide (display:none) instead of using visibility since moving the mouse to the edge of the screen will add scrollbars now

 $('#cookie').mouseover(function() { $('#tooltip').css({"opacity":1, "visibility": "visible"}) }); $('#cookie').mouseout(function() { $('#tooltip').css({ opacity: 0, visibility: "hidden"}) }); // I also have some code to move the tooltip wherever the cursor is: var $tooltip = $('#tooltip'); $(document).on("mousemove",function(e) { $tooltip.css({"left": e.pageX + 'px', "top" : e.pageY + 'px'}); }) 

 .cookieToolTip { background: #C8C8C8; margin-left: 28px; padding: 10px; position: absolute; z-index: 1000; width: 200px; height: 50px; opacity: 0; visibility: hidden; transition: opacity 1s; border: 1px solid black; border-radius: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="zoomin"> <img id="cookie" oncontextmenu="return false" ondragstart="return false" src="http://www.pngall.com/wp-content/uploads/2016/07/Cookie-Download-PNG.png" /> <span class="cookieToolTip" id="tooltip">This is a picture of a cookie.</span> </div> 

Answer 2

When adding and removing class do not use the . before the classname...as it will add a class with the name .class instead of class .

You can make your code a little bit cleaner and use ES6 variable declaration ( as a bonus :) ). If your html markup is like in your example ( tooltip exactly after the image ), you can use css selector and get rid of the mouseover/mousein/mouseout methods. See example below, when you hover out of the image the tooltip dissapears

 const cookie = $("#cookie"), tooltip = $('.cookieToolTip') cookie.on("mousemove", function(e) { for (let i = tooltip.length; i--;) { tooltip[i].style.left = e.pageX + 'px'; tooltip[i].style.top = e.pageY + 'px'; } }) 

 .cookieToolTip { background: #C8C8C8; margin-left: 28px; padding: 10px; position: absolute; z-index: 1000; width: 200px; height: 50px; opacity: 0; transition: opacity 1s; border: 1px solid black; border-radius: 5px; } #cookie:hover + .cookieToolTip{ opacity:1 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="zoomin"> <img id="cookie" oncontextmenu="return false" ondragstart="return false" src="http://via.placeholder.com/350x150" /> <span class="cookieToolTip" id="tooltip">This is a picture of a cookie.</span> </div> 

Answer 3

when you add a class you don't need the dot before the class name because it's a declaration, not a selector

Wrong: $('#cookie').addClass('.cookieToolTipHovered');
Correct: $('#cookie').addClass('cookieToolTipHovered');

Then, you need to remove the class when you're out, if you don't the class will keep applied, by the other part, select the proper item to apply (hover / mouseover...) condition (see the example below).

 $('.zoomin').mouseover(function() { $('#cookie').addClass('cookieToolTipHovered'); }); $('#cookie').mouseout(function() { $('#cookie').removeClass('cookieToolTipHovered'); }); 

 .cookieToolTipHovered { opacity: 0.35; transition: 1s; } .cookieToolTip { background: #C8C8C8; margin-left: 28px; padding: 10px; position: absolute; z-index: 1000; width: 200px; height: 50px; opacity: 0; visibility: hidden; transition: opacity 1s; border: 1px solid black; border-radius: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="zoomin"> <img id="cookie" oncontextmenu="return false" ondragstart="return false" src="http://www.pngall.com/wp-content/uploads/2016/07/Cookie-Download-PNG.png" /> <span class="cookieToolTip" id="tooltip">This is a picture of a cookie.</span> </div> 

Answer 4

You don't need a mouseover event handler.

Instead, you can handle the opacity toggle using pure CSS with a combination of :hover and + :

#cookie:hover+.cookieToolTip{ //This will change the opacity 
                              //of the tooltip when the image is hovered
  opacity: 1;
}

EDIT: I added

.cookieToolTip:hover{
  opacity: 1;
}

To fix a bug which toggled the opacity back off when you hovered the tooltip.

Demo:

 $(document).on('mousemove', function(e) { $('.cookieToolTip').css({ left: e.pageX, top: e.pageY }); }); 

 .cookieToolTip { display: block; position: absolute; background: #C8C8C8; padding: 10px; width: 200px; height: 50px; border: 1px solid black; border-radius: 5px; opacity: 0; transition: opacity 1s; z-index: 1000; } #cookie:hover+.cookieToolTip { opacity: 1; } .cookieToolTip:hover{ opacity: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="cookie" src="http://img-3.journaldesfemmes.fr/4xufH0KP5SzV0aG1R7hg1zO_djQ=/750x/smart/b43857c04c9147e98997f9959bdd8f38/recipe-jdf/10027543.jpg" /> <span class="cookieToolTip" id="tooltip">This is a picture of a cookie.</span>