I am using jquery fullcalendar plugin and within it I want to display tooltips using the qtip library. The tooltip content is an html table with fields that are coming from the server with ajax call.
I used the fullCalendar's eventRender event to initialize the tooltip like that:
$('#fullCalendar').fullCalendar({
....
,eventRender: function (event, element) {
element.qtip({
content: {
text: function (api) {
$.ajax({
url: 'Scheduler.aspx/GetToolTip',
type: "POST",
data: JSON.stringify({ "dataid": event.id }),
dataType: "json",
contentType: "application/json; charset=utf-8"
})
.then(function (content) {
var data = content.d
var tooltip = createtoolTip(data.IQCNum, data.Phone, data.Fax, data.NumOfEmloyees, data.Status, data.ActivityType, data.AllDetails, data.ActText, data.Address, data.EndDate);
// Set the tooltip content upon successful retrieval
api.set('content.text', tooltip);
}, function (xhr, status, error) {
// Upon failure... set the tooltip content to the status and error value
api.set('content.text', status + ': ' + error);
});
//return 'Loading...'; // Set some initial text
},
title: event.title
},
style: 'qtip-bootstrap', // Give it some style
position: {
my: 'left center',
at: 'right middle'
},
show: {
delay: 0, solo: true
},
hide: {
when: 'mouseout', delay: 0
}
})...
where the createtoolTip function just returns the html content to be displayed
however, this code does not work. I checked and it does enter the createtoolTip function but no text is shown inside the tooltip beside the title.