title: Tooltip: Json content load
body: <p>I want to show a tooltip with content loaded from a json file. I am using the <a href="https://github.com/briancray/tooltipsy" rel="nofollow">tooltipsy</a> plugin.</p>
  
  <p>The element where the tooltip must show info about is given an REL with number.</p>
  
  <pre><code>&lt;span class="question hastip" rel="1"&gt;
  </code></pre>
  
  <p>This number will represent the elements in the json object</p>
  
  <pre><code>{
  "users" : [ 
      {
          "name"   : "John",
          "functie" : "Frontend webdev"
      },
      {
          "name"   : "Doe", 
          "functie" : "backend webdev"
      }
  ] 
  </code></pre>
  
  <p>}</p>
  
  <p>This is my code I call onready:</p>
  
  <pre><code>    $('.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 '&lt;div&gt;' + title + mtext +  '&lt;/div&gt;';
              });
          });
          return 'Fallback content';
      },
  
  });
  </code></pre>
  
  <p>obviously I am not able to fix it, any help? I created a <a href="http://jsfiddle.net/pwavg/S97Sp/" rel="nofollow">jsFiddle</a></p>