在完整日历中的活动底部出现引导程序3弹出窗口

Question

我在应用程序中使用fullcalendar jquery作为日历。我希望能够在用户悬停在事件上时呈现弹出窗口。我希望popover在月份视图中悬停在活动的右侧，在议程和日期视图中悬停底部。我的代码如下。

$(document).ready(function (){
    $("#calendar").fullCalendar({
        header:{
            left:'prev today next',
            center:'title',
            right:'month, agendaWeek, agendaDay'
        },
        slotEventOverlap:false,
        allDaySlot:false,
        axisFormat:'HH:mm',
        slotMinutes:15,
        events: '/calendar/eventsfeed',
        eventMouseover:function (calEvent){
            $(this).popover({
                trigger:'hover',
                title:calEvent.title,
                content:calEvent.description,
                container:"body"
            });
        },
        dayRender:function (date, cell){
        },
        dayClick:function (date, allDay){
            if (allDay){
                $("#calendar").fullCalendar('changeView', 'agendaDay');
                $("#calendar").fullCalendar('gotoDate',date);
            }else{
                month = date.getMonth()+1
                hours = date.getHours() >= 10 ? date.getHours() : "0"+date.getHours();
                minutes = date.getMinutes() >= 10 ? date.getMinutes() : "0"+date.getMinutes();
                window.location = '/calendar/entry/create/'+date.getFullYear()+'/'+month+'/'+date.getDate()+'/'+hours+':'+minutes;
            }
        },
        agenda:{
            eventMouseover:function(calEvent){
                $(this).popover({
                    trigger:'hover',
                    title:calEvent.title,
                    content:calEvent.description,
                    container:"body",
                    placement:'bottom'
                });
            },
        },
        day:{
            eventMouseover:function(calEvent){
                $(this).popover({
                    trigger:'hover',
                    title:calEvent.title,
                    content:calEvent.description,
                    container:"body",
                    placement:'bottom'
                });
            }
        }
    });
});

我不知道如何在bootply中加载完整日历，所以要将其与bootstrap 3一起使用。问题是popover总是在右边渲染，无论我是否告诉它在底部渲染。。。我该如何改变这种行为？

Answer 1

尝试使用如下的popover：

$(this).popover({
                      title: event.title + eventort,
                      placement: placement,
                      trigger: 'manual',
                      delay: { show: 200, hide: 100 },
                      animation: true,
                      container: '#calendar',
                      html: true,
                      content: contenttext
                  });
$(this).popover('show');

Answer 2

尝试将"placement"替换为"top"：

$(this).popover({
                  title: event.title + eventort,
                  placement: 'top',
                  trigger: 'manual',
                  delay: { show: 200, hide: 100 },
                  animation: true,
                  container: '#calendar',
                  html: true,
                  content: contenttext
              });