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中加载fullcalendar，以便将它与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
              });

在fullcalendar中的事件底部出现bootstrap3 popover

2 个答案: