javascript - Loading JSON arrays in Jquery as tooltips -
i need load descriptions of json variable script tooltips. far have achieved doing it, have 2 problems :
- when hover in 1 sentence of table, tooltips 4 sentences appears.
- seems can't return table sentences 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 @ 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 & 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: 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 tooltip :
<script> // description tooltip var jsonobject = json.parse(eventsjson); $(document).ready(function(){ $('a.tooltip').hover(function(){ //when hover starts //get id of current tooltip active_tooltip = $(this).attr('rel'); //replace html in header data 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 @ war"); $('#three').html("found poems & outsider poetry"); $('#four').html("natural death: 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 @ 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: 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."}]}}';
the best approach doing using tooltip library, i.e. https://jqueryui.com/tooltip/
however, if need custom tooltip following code start. please note should not replace yout content anchor. add additional html element display tooltip information.
see jsfiddle 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(); } ); });
Comments
Post a Comment