Twitter bootstrap tooltips do not work for events in fullcalendar

Question

I want to show bootstrap tooltips over events in fullcalendar of Adam Shaw. I tried this code:

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

But it does not work. What's wrong here?

Solution 1

I got it working:

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

Solution 2

You can shorten your answer a bit like this:

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

Solution 3

For new version 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();
});

Solution 4

In fullCalendar 4, I just replyed here: Tooltip in fullcalendar not working

use eventRender function:

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

Solution 5

My solution is:

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

View more solutions

Comments

[john 4d5]

Does your div (fc-event) have a title?