How to feed tooltip text through ajax using tabulator?

Question

I want to populate my extra information tooltip by requesting an Ajax call.

Here is my JS table:

    var table = new Tabulator("#GridView1", {
        layout: "fitColumns",
        columns: [
            { title: "Autor PC", field: "Autor PC", width: 200, tooltip: function (cell) { return mouseover(cell.getValue()); } },
            //Other columns........
        ]
    });

Here is my function that defines the AJAX call.

function mouseover(user) {
    $.ajax({
        type: "GET",
        url: "AjaxServices.asmx/UsuarioInfo",
        data: JSON.stringify('{usuario: "' + user + '" }'), 
        contentType: "application/json; charset=UTF-8",
        dataType: "json",
        success: function (msg) {
            alert("correct: "+ msg.d);
        },
        error: function (msg) {
            alert("error: " + msg.d);
        }
    }); 
}

And now in this webform project, I have created an .asmx file that it has the webmethod's defintion...

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]
    public class AjaxServices : System.Web.Services.WebService
    {
        [WebMethod]
        public static string UsuarioInfo(string usuario)
        {
            //My logic that will return the user info...
        }
    }

I've done a lot of researches, but I coundn't find any solution... What am I doing wrong? Is this possible?

Answer 1

After some time trying to find out what happened, I just made my call synchronous and parsed into JSON...

function mouseover(user) {

    return JSON.parse($.ajax({
        type: "POST",
        url: "AjaxServices.asmx/UsuarioInfo",
        async: false,
        data: '{ "usuario": "' + user + '"}', 
        contentType: "application/json; charset=UTF-8",
        dataType: "json",
        success: function (msg) {
            return msg.d;
        },
        error: function (msg) {
            //alert("erro " + msg.d);
        }
    }).responseText).d; 
}

Then I was able to get my response string and return to my function in the tooltip.

tooltip: function (cell) { return mouseover(cell.getValue()); }