Close tooltip in Full Calendar

Question

I’m trying to close my tooltip on jQuery calendar:

Example

Clicking on the event will show the tooltip and a " x " in the upper corner, when clicking on it the tooltip must be closed, the JS code on line 16 calls the function to close.

But I’m not getting results.

JS

$.fn.popover.defaults.container = 'body';

$('#mycalendar').fullCalendar({
             header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'agendaWeek,agendaDay'
                    },
        eventRender: function (event, element) {
                    element.popover({
                        title: 'My Title <div id="x-fechar">x</div>',
                        placement:'top',
                        html:true,
                        content: event.msg
                    });
                    $('#x-fechar').click(function(e){
                        element.popover('hide');
                    });
                  },
                 editable: false,        
          events: [
                    {
                        title  : 'Click me 1',
                        msg: 'I am clipped to the left which is annoying',
                        start  : '2014-09-01 06:00:00',
                        end  : '2014-09-01 08:00:00',
                        editable: false,                            
                        allDay : false
                    },
                    {
                        title  : 'Click me 2',
                        msg: 'I am OK',                            
                        start  : '2014-09-04 14:00:00',
                        end  : '2014-09-04 15:00:00',
                        editable: false,                                                        
                        allDay : false 
                    }               
                ]
        }); 

Answer 1

Like the #x-fechar does not yet exist in the DOM, have to declare his click() thus:

$(document).on("click", "#x-fechar", function(e){ 
    element.popover('hide');
});

But since it is more than one element, one should use a class .x-fechar. I haven’t found an official way to do this, but to know which Pover belongs to which event, we can add the event ID to the element .x-fechar:

title: 'My Title <div class="x-fechar" data-eid="'+event._id+'">x</div>',

And check during the click:

$(document).on("click", ".x-fechar", function (e) {
    if( $(this).data('eid') == event._id )
        element.popover('hide');
});

$('#mycalendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'agendaWeek,agendaDay'
    },
    defaultDate: '2014-09-01',
    eventRender: function (event, element) {
        element.popover({
            title: event.title + '<div class="x-fechar" data-eid="'+event._id+'">x</div>',
            placement: 'top',
            html: true,
            content: event.msg
        });
        $(document).on("click", ".x-fechar", function (e) {
            if( $(this).data('eid') == event._id )
                element.popover('hide');
        });
    },
    editable: false,
    events: [{
        title: 'Evento 1',
        msg: 'Lorem ipsum lorem.',
        start: '2014-09-01 06:00:00',
        end: '2014-09-01 08:00:00',
        editable: false,
        allDay: false
    }, {
        title: 'Evento 2',
        msg: 'Ut enim ad minim veniam',
        start: '2014-09-04 14:00:00',
        end: '2014-09-04 15:00:00',
        editable: false,
        allDay: false
    }]
});

#mycalendar {
    margin:30px;
    height:600px;
    max-width:500px;
}
.x-fechar {
    position: absolute;
    right: 0;
    padding: 0px 20px 0 0px;
    margin: -15px 0 0 0;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">

<div id="mycalendar"></div>

There is a bug when we change the display in the calendar (e.g., change of month) which causes popovers not to disappear and cannot be closed by the button .x-fechar.

To fix it I added the event viewDestroy that is triggered at each display change:

viewDestroy: function( ev, el ) {
    $('.popover').each(function(){
        $(this).remove();
     });
}