Keep popover open while over content window with fullcalendar

Question

I'm trying to figure out how to keep the fullcalendar popover open on hover once you hover from the event block to the popover content window.

http://jsfiddle.net/rjayako/7zoqgroj/

Currently when you hover over the event block the popover appears, but immediately disappears when you hover anywhere else. What I'm trying to achieve is have the box still show when you hover the popover box itself so that the user can click on a link within the popover box.

Here is what my eventRender for the popover looks like so far

  eventRender: function(event, element) {
    element.popover({
      title: "My Title",
      placement: 'bottom',
      html: true,
      content: event.msg,
      trigger: "hover"
    });
  },

Any help would be deeply appreciated.

Regards.

Answer 1

here is your answer. Disable animation and make the popover to trigger manually. JSfiddle

animation:false 
trigger: "manual"

here is the full eventRender:

eventRender: function (event, element) {
                    element.popover({
                    title: "My Title",
                    placement: 'bottom',
                    html: true,
                    animation:false,
                    content: event.msg,
                    trigger: "manual"
                        }).on("mouseenter", function () {
                            var _this = this;
                            $(this).popover("show");
                            $(".popover").on("mouseleave", function () {
                                $(_this).popover('hide');
                            });
                        }).on("mouseleave", function () {
                            var _this = this;
                            setTimeout(function () {
                                if (!$(".popover:hover").length) {
                                    $(_this).popover("hide");
                                }
                            }, 300);
                        });
                      }