$(document).ready(function() {
    $('.event').each(function() {
        $(this).qtip(
        {
            content:
            {
                url: '/events/details',
                data: { id: $(this).attr('rel') },
                method: 'get'
            },
            show: { delay: 0, effect: { type: 'grow'} },
            position: { corner: { tooltip: 'bottomLeft', target: 'topRight'} },
            style:
            {
                width: 300,
                background: '#CBD7E2',
                border:
                {
                    color: '#5F83A7'
                },
                tip: true
            },
            api: {
                beforeContentLoad: function() {
                    this.updateContent("Loading Event Details... <img src='/public/images/loading.gif' alt='loading' width='16' height='16' />");
                }
            }
        });
    });
});