Twitter Bootstrap的工具提示无法在fullcalendar中使用

Question

我想在Adam Shaw的fullcalendar中的事件上显示bootstrap工具提示。 我尝试了以下代码：

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

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

- user2598794

---

你的 div（fc-event）有标题吗？ - john 4d5

Answer 1

你可以像这样简短回答：

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

- Peter Valadez

Answer 2

我已经搞定了：

我已经解决了：

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

- user2598794

Answer 3

对于新版本Full Calendar版本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();
});

- Neeraj Tangariya

Answer 4

在fullCalendar 4中，我在这里回复： Tooltip in fullcalendar not working 使用eventRender函数：

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

- Antonio Santise

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');
      }
    });

- gLorenzini

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'
            });
        },

- 3l10