CODEWITHSUNDEEP
jqueryjsontooltip
pwavg
pwavg

Reputation: 295

Tooltip: Json content load

I want to show a tooltip with content loaded from a json file. I am using the tooltipsy plugin.

The element where the tooltip must show info about is given an REL with number.

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

This number will represent the elements in the json object

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

}

This is my code I call 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';
    },

});

obviously I am not able to fix it, any help? I created a jsFiddle

Upvotes: 1

Views: 2907

Answers (1)

bipen
bipen

Reputation: 36541

try this

.....
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 the console...

Upvotes: 1

Related Questions