I'm using the qTip jQuery plugin to create dynamic tool tips. The tooltip sends an id to a cfc which runs a query and returns data in JSON format.

At the moment, the tooltip loads with the following:

{"COLUMNS:" ["BOOKNAME","BOOKDESCRIPTION"["MYBOOK","MYDESC"]]} 

Here's the jQuery

$('#catalog a[href]').each(function()
{
    var gi = parseInt($(this).attr("href").split("=")[1])
    $(this).qtip(
    {
        content: {
            url: 'cfcs/viewbooks.cfc?method=bookDetails',
            data: { bookID: gi  },
            method: 'get',
            title: {
                text: $(this).text(),
                button: 'Close'
            }
        },
        api :{
        onContentLoad : function(){
            }
        },
    });
});

As I mentioned, the data is returned successfully, but I am unsure how to output it and format it with HTML.

I tried adding content: '<p>' + data.BOOKNAME + '

' to api :{ onContentLoad : function(){ ..... to see if I could get it to output something, but I get a 'data is undefined error'

What is the correct way to try and output this data with html formatting?

Many thanks!