jquery fullcalendar remove popover

Question

I found sample almost like mines, and i need that if i click anywhere on the screen that popover would hide. Is it possible? If yes, how?

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

$('#mycalendar').fullCalendar(
        {
            defaultView: "agendaWeek",
            slotMinutes:60,
            allDaySlot:false,
             header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'agendaWeek,agendaDay'
                    },
        eventRender: function (event, element) {
                    element.popover({
                        title: "My Title",
                        placement:             event.start.getHours()>12?'top':'bottom',
                        html:true,
                        content: event.msg
                    });
                  },
                 editable: false,        
          events: [
                    {
                        title  : 'Click me 3',
                        msg: 'I am clipped to the right which is annoying',                            
                        start  : '2011-05-07 12:00:00',
                        end  : '2011-05-07 13:00:00',
                        editable: false,                                                        
                        allDay : false 
                    }                  
                ]
        }); 
 $('#mycalendar').fullCalendar( 'gotoDate', 2011,04,7 );

the jsfiddle can be found HERE.

Any help I will appreciate

Answer 1

Just add this J Query code in script:

$(document).on('click', function (e) {
        $('[data-toggle="popover"],[data-original-title]').each(function () {
            //the 'is' for buttons that trigger popups
            //the 'has' for icons within a button that triggers a popup
            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                (($(this).popover('hide').data('bs.popover') || {}).inState || {}).click = false  // fix for BS 3.3.6
            }

        });
    });

Note: it will close previous popover.

Answer 2

Try the following change inside the eventrender function:

eventRender: function (event, element) {
    element.popover({
        title: "My Title",
        placement:             event.start.getHours()>12?'top':'bottom',
        html:true,
        content: event.msg,
        trigger: 'focus' // trigger popover on element focus
    });
    element.attr('tabindex', -1); // make the element (div) focusable
},

I've also updated the jsfiddle here.