工具提示：Json內容加載

Question

我想顯示一個工具提示，其中包含從json文件加載的內容。我正在使用tooltipsy插件。

工具提示必須顯示信息的元素被賦予一個REL號碼。

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

這個數字將代表JSON對象

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

}

元素這是我的代碼調用onready：

$('.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 ..check控制檯...