Help with converting jquery to javascript

Question

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 3-Sep-18 2:48am

Member 13971174

Updated 17-Jul-20 23:25pm

v2

Add a Solution

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.

Sinisa Hajnal 5-Sep-18 2:19am

You could go into jQuery code and simply copy it. For selectors, modern javascript has querySelector and querySelectorAll on the document element that works very similarly (same?) to jQuery selectors. Same for events, there are some that relate directly and others that can be used instead of some of jQuery ones. Again, you can use jQuery code to check how they are used.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Shravan Kumar A S · Answer 1 · 2020-07-17T23:25:00

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