Loading JSON arrays in Jquery as tooltips

Question

I need to load the descriptions of my JSON variable into my script as tooltips. So far i have achieved doing it, but i have 2 problems :

1. When i hover in 1 sentence of my table, tooltips for all four sentences appears.
2. Seems like i can't return my table sentences back to normal when hover ends.

HTML - TABLE :

<table id="myTable">
            <tr class="head">
                <th></th>
                <th data-city="ny">New York</th>
                <th data-city="il">Chicago</th>
                <th data-city="ca">San Francisco</th>
            </tr>
            <tr>
                <th id="one"><a href="#" class="tooltip" rel="0">A Poetic Perspective</a></th>
                <td>Sat, 4 Feb 2012<br />11am - 2pm</td>
                <td>Sat, 3 Mar 2012<br />11am - 2pm</td>
                <td>Sat, 17 Mar 2012<br />11am - 2pm</td>
            </tr>
            <tr class="even">
                <th id="two"><a href="#" class="tooltip" rel="1">Walt Whitman at War</a></th>
                <td>Sat, 7 Apr 2012<br />11am - 1pm</td>
                <td>Sat, 5 May 2012<br />11am - 1pm</td>
                <td>Sat, 19 May 2012<br />11am - 1pm</td>
            </tr>
            <tr>
                <th id="three"><a href="#" class="tooltip" rel="2">Found Poems &amp; Outsider Poetry</a></th>
                <td>Sat, 9 Jun 2012<br />11am - 2pm</td>
                <td>Sat, 7 Jul 2012<br />11am - 2pm</td>
                <td>Sat, 21 Jul 2012<br />11am - 2pm</td>
            </tr>
            <tr class="even">
                <th id="four"><a href="#" class="tooltip" rel="3">Natural Death: An Exploration</a></th>
                <td>Sat, 4 Aug 2012<br />11am - 4pm</td>
                <td>Sat, 8 Sep 2012<br />11am - 4pm</td>
                <td>Sat, 15 Sep 2012<br />11am - 4pm</td>
            </tr>
        </table>

SCRIPT FOR TOOLTIP :

<script> // description tooltip
            var jsonObject = JSON.parse(eventsJson);
            $(document).ready(function(){
                $('a.tooltip').hover(function(){ //when hover starts
                    //Get the ID of the current tooltip
                    active_tooltip = $(this).attr('rel');
                    //Replace the HTML in the header with data from JSON array
                    $('#one').html(jsonObject.events.event[0].descr);
                    $('#two').html(jsonObject.events.event[1].descr);
                    $('#three').html(jsonObject.events.event[2].descr);
                    $('#four').html(jsonObject.events.event[3].descr);
                },
                function(){ //When hover ends
                    $('#one').html("A Poetic Perspective");
                    $('#two').html("Walt Whitman at War");
                    $('#three').html("Found Poems &amp; Outsider Poetry");
                    $('#four').html("Natural Death: An Exploration");
                });
            });
        </script>

JSON VAR :

var eventsJson='{"events":{"event":[{"id":"1","name":"A Poetic Perspective","isFree":"true","locations":[{"location":"New York","eventDate":"2015-05-02","eventTime":"14:00"},{"location":"Chicago","eventDate":"2015-05-01","eventTime":"14:00"},{"location":"San Francisco","eventDate":"2015-06-01","eventTime":"15:00"}],"descr":"Vivamus elementum, diam eget ullamcorper fermentum, ligula libero euismod massa, quis condimentum tellus lacus sit."},{"id":"2","name":"Walt Whitman at War","isFree":"false","locations":[{"location":"New York","eventDate":"2015-07-02","eventTime":"14:00"},{"location":"Chicago","eventDate":"2015-07-01","eventTime":"14:00"},{"location":"San Francisco","eventDate":"2015-08-01","eventTime":"15:00"}],"descr":"Donec convallis eu metus eget dictum. Etiam non lobortis dui."},{"id":"3","name":"Found Poems & Outsider Poetry","isFree":"false","locations":[{"location":"New York","eventDate":"2015-06-02","eventTime":"11:00"},{"location":"Chicago","eventDate":"2015-07-01","eventTime":"14:00"},{"location":"San Francisco","eventDate":"2015-06-01","eventTime":"15:00"}],"descr":"Ut fermentum, elit vel iaculis viverra, dui libero ultrices nibh, ut ornare."},{"id":"4","name":"Natural Death: An Exploration","isFree":"true","locations":[{"location":"New York","eventDate":"2015-05-02","eventTime":"14:00"},{"location":"Chicago","eventDate":"2015-05-01","eventTime":"14:00"},{"location":"San Francisco","eventDate":"2015-06-01","eventTime":"15:00"}],"descr":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet urna ut tortor consequat."}]}}';

Answer 1

The best approach for doing this is using a tooltip library, i.e. https://jqueryui.com/tooltip/

However, if you need a custom tooltip the following code could be an start. Please note that you should not replace yout content from your anchor. But you could add additional html element to display the tooltip information.

See this JSfiddle for a working sample.

var jsonObject = JSON.parse(eventsJson);
$(document).ready(function(){

    $('a.tooltip').hover(
        function(){ //when hover starts

            var idx = $(this).attr('rel');
            $(this).append('<span>' + jsonObject.events.event[idx].descr + '</span>');
        },
        function(){ //When hover ends
            $(this).find('span').remove();
        }
    );
});