在Jquery中加载JSON数组作为工具提示

Loading JSON arrays in Jquery as tooltips

本文关键字：工具提示 数组 JSON Jquery 加载      更新时间：2023-09-26

我需要将JSON变量的描述作为工具提示加载到脚本中。到目前为止，我已经做到了，但我有两个问题:

  1. 当我悬停在我的表格中的一个句子时，所有四个句子的工具提示都会出现。
  2. 似乎我不能返回我的表句回到正常时悬停结束。

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> // 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."}]}}';

最好的方法是使用工具提示库，即https://jqueryui.com/tooltip/

但是，如果您需要自定义工具提示，可以从下面的代码开始。请注意，您不应该替换您的内容从您的锚。但是您可以添加额外的html元素来显示工具提示信息。

查看这个JSfiddle的工作示例。

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();
        }
    );
});
相关文章：