Replacing HTML tooltip content with PHP/jQuery

Question

So, I have that WordPress website on which I installed a template (Zoo). My problem is that I want the whole site to be in French, and there are three buttons in that template which title tag is coded deep in a js file that is inside a plugin which has been integrated to the template.

These are my first steps as a web developer (I come from C++) and I'm having quite a hard time understanding what is missing in the files, but I understood a few things by looking around.

So I made a child theme. This is the functions.php file. I think it works fine, but here it is in case I am doing it wrong :

<?php
function removethosedamntooltips(){
    wp_register_script('removetooltips', get_stylesheet_directory_uri() . '/js/removetooltips.js');
    wp_enqueue_script( 'removetooltips' );
}
add_action('wp_enqueue_scripts', 'removethosedamntooltips');

This is the aforementioned removetooltips.js file. I believe I have to call for a button hover because the template is single-page parallax and the buttons I want to modify are not visible until you click another button which allows for another display without sending the browser to another URL (if I remove line 2 and the closing brackets that go with it, it doesn't work anyway). Also, those tooltips appear only on mouse hover, so it seems a good idea :

jQuery(document).ready(function(){
  alert("jQuery!!");
  jQuery("button").hover(function(){
    alert("jQuery!!");
    jQuery(".mfp-arrow-left").attr("title", "Précédent (flèche gauche)");
    jQuery(".mfp-arrow-right").attr("title", "Suivant (flèche droite)");
    jQuery(".mfp-close").attr("title", "Fermer (Esc)");
  });
});

The first alert displays after the page is loaded, but the second one does not show up. The tooltips (button title) still show up in English.

A piece of information that might be useful to solve this problem (I'm only 2 days into reading stuff about JavaScript and jQuery so I don't really know): I had to use jQuery instead of $ or the console would tell me that $ is an unknown function. Do I need to somehow include the jQuery framework in my file (if so, where and how ?), although a calling for the jQuery library already shows up in the header ?

If you provide a solution that will remove the tooltips instead of replacing their content, I will be happy enough.

Thank you in advance !

Answer 1

Instead of using jQuery("button").hover(function(){...}); You should find the container in which all buttons are placed or just use body and use jquery .on() method. As far as I know it'll work. so your complete code will be like this

jQuery(document).ready(function(){
  alert("jQuery!!");
  jQuery("body").on("hover", "button", function(){
    jQuery(".mfp-arrow-left").attr("title", "Précédent (flèche gauche)");
    jQuery(".mfp-arrow-right").attr("title", "Suivant (flèche droite)");
    jQuery(".mfp-close").attr("title", "Fermer (Esc)");
  });
});

Explanation: Using .on() method binds the event with dynamically created elements too. As you mentioned in your question that buttons are not created until another button/link is clicked.

Edit: Tested this one and its working. I've removed the second alert because with that you won't be able to test.