Question

我想显示一个工具提示，其中包含从json文件加载的内容。我正在使用tooltipsy插件。

工具提示必须显示信息的元素将被赋予REL编号。

<span class="question hastip" rel="1">

此数字将表示json对象中的元素

{
"users" : [ 
    {
        "name"   : "John",
        "functie" : "Frontend webdev"
    },
    {
        "name"   : "Doe", 
        "functie" : "backend webdev"
    }
]

}

这是我打电话给我的代码：

    $('.hastip').tooltipsy({
    showEvent: 'click',
    hideEvent: 'click',

    content: function ($el, $tip) {
        var $el = $(this);
        var active_tooltip = $el.attr('rel');

        $.getJSON('/Scripts/test.js', function (data) {

            $tip.html(function() {
              var title = data.users[active_tooltip].name;
              var mtext = data.users[active_tooltip].functie;
              return '<div>' + title + mtext +  '</div>';
            });
        });
        return 'Fallback content';
    },

});

显然我无法修复它，有什么帮助吗？我创建了一个jsFiddle

Answer 1

试试这个

.....
content: function ($el, $tip) {
   // var $el = $(this); //no need ,$el is given by the $el in content options.
    var active_tooltip = $el.attr('rel');

    $.getJSON('/Scripts/test.js', function (data) {

        $tip.html(function() {
          var title = data.users[active_tooltip].name;
          var mtext = data.users[active_tooltip].functie;
          return '<div>' + title + mtext +  '</div>';
        });
    });
    return 'Fallback content';
},
....

fiddle here ..检查控制台......

工具提示：Json内容加载

1 个答案: