get qTip2 Div ID on Fullcalendar tips

Question

I have qTip2 tips on my Fullcalendar events. These automatically render with unique sequential Div ID such as

<div id="qtip-0" ...
<div id="qtip-1" ...
<div id="qtip-2" ...
etc ...

I need to communicate with these Divs directly, like:

function qtip_do_something(DivID){
    $('#qtip-' + DivID).... do something
}

What I am struggling with is identifying the specific Div ID of each qTip.

I want to pass this ID to the function via a function call in the content of the event, like this:

eventRender: function (event, element) {
    element.qtip({
        content: {
                text: '<a href="#" onclick="qtip_do_something(' + div.id + '); return false;">Do something</a>'
        } 

note: I have used div.id in the example above to illustrate how I want to do it.

Does anyone know how to do this? Or an alternative that would provide the same functionality. Thanks.

Answer 1

The answer to this was to pass in the ID as part of the JSON or other source as you require, then name it in using id: event.id in the element:

eventRender: function (event, element) {
    element.qtip({
        id: event.id,        
        content: {
                text: '<a href="#" onclick="qtip_do_something(' + event.id + '); return false;">Do something</a>'
        } 

ADDITIONAL NOTE (@ Dec 2014):

qTips in fullcalendar don't get deleted when you change views between week and month (for-instance). However, the tips stop being bound when you move from one view to another. If you then try to interact with an existing tip that you created with the custom ID of 1234 in another view, because it's no longer bound a new ID is created, but id 1234 is already taken with the original tip and a new ID is given to this new tip.

You can see this behaviour in the console, the new tip will likely be something like qtip-0.

I resolved this by deleting all of the tips created at the point the next, previous, month etc buttons are clicked:

function destroy_all_qtips(){
        $('.qtip').each(function(){
                $('div.qtip:hidden').qtip('destroy',true);
                $('div.qtip:visible').qtip('destroy',true);
        })
}

onload:

$('.prev-button').click(function(){
    destroy_all_fc_qtips();
});
$('.next-button').click(function(){
     destroy_all_qtips();
});
$('.today-button').click(function(){
    destroy_all_qtips();
});
$('.month-button').click(function(){
    destroy_all_qtips();
});
$('.agendaWeek-button').click(function(){
    destroy_all_qtips();
});
$('.agendaDay-button').click(function(){
     destroy_all_qtips();
});    

Hope this helps