3

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

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

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

4

6 回答 6

11

您可以像这样缩短答案:

eventAfterRender: function (event, element) {
        $(element).tooltip({title:event.title, container: "body"});
}
于 2015-04-04T00:35:37.807 回答
7

我让它工作:

eventRender: function (event, element) {
            var tooltip = event.Description;
            $(element).attr("data-original-title", tooltip)
            $(element).tooltip({ container: "body"})
           }
于 2013-09-06T08:45:15.970 回答
6

对于新版本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();
});
于 2020-10-13T13:36:39.210 回答
4

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

使用 eventRender 函数:

eventRender: function (info) {
  $(info.el).tooltip({ title: info.event.title });     
}
于 2019-09-05T15:22:54.140 回答
3

我的解决方案是:

 $('#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');
      }
    });
于 2015-08-28T15:46:38.287 回答
1

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

eventDidMount: function (info) {
            $(info.el).popover({
                animation: true,
                delay: 300,
                content: '<b>Title</b>:' + info.event.title + "</b>:",
                trigger: 'hover'
            });
        },
于 2021-06-12T10:34:31.100 回答