Click here to Skip to main content
15,851,514 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello, could anyone help me with converting this Jquery code to pure javascript I wrote this script in Jquery but unfortunately I can’t deal with javascript.
Maybe it will be useful to someone too. It is a tooltip for graphic elements (img) in woocommerce which can be found in the short description of the shop item.

JavaScript
<script type="text/javascript">
// tooltip for Pict

$('.woocommerce-product-details__short-description img').hover(function() 
       {
            var altText = $(this).attr('alt');
            var addingText = '<div class="tooltipText">'+altText+'</div>';
            $(this).before(addingText);

            if ( $( ".tooltipText" ).length > 0 ) 
            {
                window.onmousemove = function (e) {
                var x = e.clientX,
                    y = e.clientY;
                tooltipText[0].style.top = (y + 20) + 'px';
                tooltipText[0].style.left = (x + 20) + 'px';
                }
             }

       }, function()
       {
            $(this).parent().find('.tooltipText').remove();
       })
</script>


What I have tried:

I started to convert it but I'm already stuck on the second line ...
Posted
Updated 18-Jul-20 0:25am
v2
Comments
F-ES Sitecore 3-Sep-18 9:02am    
Have a look at http://youmightnotneedjquery.com/. The $(...) syntax is called a selector so use the search on that site to find alternatives. You can do the same with the other stuff too.
CHill60 3-Sep-18 9:19am    
Also see this CP question/solutions Convert Jquery to Javascript[^]
Member 13971174 4-Sep-18 5:10am    
Thanks guys for tips. But can you help me with first line? - i cannot find way to write $('.woocommerce-product-details__short-description img').hover(function() in JS
Dominic Burford 4-Sep-18 5:59am    
The first line is using JQuery hover. This is similar to a Javascript mouseover event. So I would look into those to get started.
Member 13971174 4-Sep-18 6:34am    
oh, ok. Now i see. Thank you.

1 solution

You can try below code

let element=document.getElementsByClassName("woocommerce-product-details__short-description");
or
let element=document.querySelector(".woocommerce-product-details__short-description");

element.addEventListener("mouseenter", function( event ) {
//Add your code here
});
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900