twitter-bootstrap - Twitter 引导工具提示不适用于全日历中的事件

Question

我想在Adam Shaw 的 fullcalendar 中显示事件的引导工具提示。我试过这段代码：

eventMouseover: function (event, jsEvent) {
                $(this).tooltip();
                $(this).css('rel', 'tooltip');
                $(this).tooltip({
                    selector: '[rel=tooltip]'
                });                
            },

但它不起作用。这里有什么问题？

Answer 1

您可以像这样缩短答案：

eventAfterRender: function (event, element) {
        $(element).tooltip({title:event.title, container: "body"});
}

Answer 2

我让它工作：

eventRender: function (event, element) {
            var tooltip = event.Description;
            $(element).attr("data-original-title", tooltip)
            $(element).tooltip({ container: "body"})
           }

Answer 3

对于新版本Full calendar version 5

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new Calendar(calendarEl, {
      plugins: [ momentPlugin, dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin ],
      initialView: 'dayGridMonth',
      themeSystem: 'bootstrap',
      height: 600,
      selectable:true,
      editable:true,
      headerToolbar: {
        left: 'today,prev,next',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      eventClick: function(info) {
          var eventObj = info.event;
          console.log(eventObj.extendedProps.description);
      },
      eventDidMount: function(info) {
        $(info.el).tooltip({
            title: info.event.title,
        });
      },
      events: '/url',
      eventColor: '#378006',
    });

    calendar.render();
});

Answer 4

在 fullCalendar 4 中，我只是在这里回复： 工具提示 in fullcalendar not working

使用 eventRender 函数：

eventRender: function (info) {
  $(info.el).tooltip({ title: info.event.title });     
}

Answer 5

我的解决方案是：

 $('#calendar').fullCalendar({
      ...
      events: [
       {"title":"foo",
        "description":"bar<br>baz",
        "start":"2015-08-28 17:45:00",
        "url":"foo"},
       { ...
       }
       ],
      eventMouseover: function(event, element) {
        $(this).tooltip({title:event.description, html: true, container: "body"});
        $(this).tooltip('show');
      }
    });

Answer 6

我使用 Bootstrap 和 fullcalendar 5 的解决方案：

eventDidMount: function (info) {
            $(info.el).popover({
                animation: true,
                delay: 300,
                content: '<b>Title</b>:' + info.event.title + "</b>:",
                trigger: 'hover'
            });
        },