Wordpress and JS Tooltip does not works

Question

i'm building this website using Wordpress with a Bootstrap Plugin.

As you can see at the bottom there is a col-md-8 with a table of content and on the right a col-md-4 with a picture.

This picture should be an animated tooltip. Basically when you go with the mouse over the table row the picture should change. I'm using this JS <script> but does not works:

JS:

$(document).ready(function(){
$('.row1').hover(function() {
  $('.one').toggle();
});

$('.row2').hover(function() {
  $('.two').toggle();
});

$('.row3').hover(function() {
  $('.tree').toggle();
});     
});

This is the CSS:

.one, .two, .tree { 
display: none; 
}


.row1:hover {
background-color: #91bd10;
color: #ffffff;
}

.row2:hover {
background-color: #91bd10;
color: #ffffff;
}

.row3:hover {
background-color: #91bd10;
color: #ffffff;
}

.info-box {
width: 400px;
height: 200px;
background-image: url('http://www.jp.nowcommu.myhostpoint.ch/wp-content/uploads/2016/03/base-1.png');
background-size: cover !important;
margin: 0 auto;
}

Any ideas?

EDIT JS:

if($ == undefined){
 $ = jQuery;
}
$(document).ready(function(){
$('.row1').hover(function() {
  $('.one').toggle();
});

$('.row2').hover(function() {
  $('.two').toggle();
});

$('.row3').hover(function() {
  $('.tree').toggle();
});     
});

EDIT 2: JS Code

Answer 1

You've got an error in your JS. Check your console: Uncaught SyntaxError: Unexpected token <

This is the code in your page:

 $(document).ready(function(){
    $('.row1').hover(function() {
      $('.one').toggle();
    });</p>
<p>   $('.row2').hover(function() {
      $('.two').toggle();
    });</p>
<p>    $('.row3').hover(function() {
      $('.tree').toggle();
    }); 

See those <p> tags?

I suggest you replace the code in your site with the code from your question.