Qtip data not defined error

Question

I am using Qtip tooltip and my content is from JSON. When i click the tooltip to display the content, i get an error that 'data is not defined' when inspecting the element in chrome.

This is my javascript code.

 $('#accordion_functions ul li a span:nth-child(2)').each(function () {    
  $(this).qtip({
        content: {
    text: function(event,api) {
        $.ajax({
            url: 'http://localhost:51783/Help/GetHelpText.ashx', 
            type: 'GET',
            dataType: 'json', 
           data: {
             id: $(this).attr('id') // Pass through the ID span
            },                  
        })
        .then(function(content) {

            var content = 'Help' + data.Text;                                
            api.set('content.text', content);

        }, function(xhr, status, error) {

            api.set('content.text', status + ': ' + error);
        });

        return 'Loading' // Set some initial loading text
    }
},
        hide: {
            event: 'click',
            fixed: true,
            delay: 50
        },
        show: {
            event: 'click',
            solo: true
        },
        events: {
            show: function (event, api) {
                $(api.elements.target).addClass('highlight');
            },
            hide: function (event, api) {
                $(api.elements.target).removeClass('highlight');
            }
        },
        style: {                
            width: 1200,
            padding: 5,
            tip: 'bottomRight',
        },
        position: {
            my: 'bottom right',
            at: 'bottom middle'
        }
    });

The data posted by the url looks like this:

[{"id":"PCG01","Form":"Party Company","Tab":"General","Text":"Help needed here"},{"id":"PCG02","Form":"Party Company","Tab":"Contact","Text":"This is a second help"},{"id":"PCG03","Form":"Party Company","Tab":"Settlement","Text":"Third help"},{"id":"PCG04","Form":"Party Company","Tab":"Client","Text":"Fourth help"},{"id":"PCG05","Form":"Party Company","Tab":"Trade Constraints","Text":"Fifth help"},{"id":"PCG06","Form":"Party Company","Tab":"Attachments","Text":"Sixth help"}]

What could i be doing wrong?

Answer 1

isn't it in the .then

    .then(function(content) {

        var **contentText** = 'Help' + **content**.Text;                                
        api.set('content.text', **contentText**);