Fullcalendar with Twitter Bootstrap Popover

Question

I am trying to get Fullcalendar working with twitter boostrap popovers.
if I click an event, i want to show some details in the popover.
So first added this lil snippet to Fullcalendar:

eventClick: function(event, jsEvent, view) {
        $this = $(this);
        $this.popover({html:true,title:event.title,placement:'top'}).popover('show');
        return false;            
    },

But now I run into 2 problems:

1. Fullcalendar is inside a div that has overflow:hidden or something, because the popover gets cut on the border of Fullcalendar. How do I fix that?
2. Similar to problem 2 I would like to place the popover via a function on top, left, right or bottom depending on the position where the event is in the Fullcalendar grid. How can i do such a function?

thanks!

Answer 1

From version 2.3 bootstrap now has a "container" option for popovers which appends the popover to a specific element.

just add {container:'body'} to append it to the body

$this.popover({html:true,title:event.title,placement:'top',container:'body'}).popover('show');