在 fullcalendar 中的事件底部出现 bootstrap3 弹出框答案

【问题标题】：Having a bootstrap3 popover appearing in the bottom of an event in fullcalendar在 fullcalendar 中的事件底部出现 bootstrap3 弹出框
【发布时间】：2013-11-26 13:39:09
【问题描述】：

我在我的应用程序中使用 fullcalendar jquery 作为日历。当用户将鼠标悬停在事件上时，我希望能够呈现弹出框。我希望弹出框在月视图中悬停在事件的右侧，在议程和日视图中悬停在底部。我的代码如下。

$(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 总是正确渲染...我该如何改变这种行为?

【问题讨论】：

标签： jquery twitter-bootstrap fullcalendar popover

【解决方案1】：

尝试像这样使用弹出框：

$(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');

【讨论】：

展示位置的价值是什么？我希望它在底部，我不希望它被手动触发我希望它在悬停时触发。

【解决方案2】：

尝试用“top”替换“placement”：

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

【讨论】：