Uncaught ReferenceError: Tooltip is not defined

Question

I am using Full Calendar v5.3.2 in my rails application Rails version 4.2.11. on initializing tooltip in eventDidMount i am getting an error of Tooltip is not defined

I am using bootstrap.bundle in my project so I think I don't need popper.js for tooltip but I have already tried adding popper.js in the project but the error was the same.

Here is the code I am using to initialize the calendar

var calendarEl = document.getElementById('full_calendar');
    calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      displayEventTime: false,
      eventDidMount: function(info) {
        var tooltip = new Tooltip(info.el, {
          title: info.event.extendedProps.description,
          placement: 'top',
          trigger: 'hover',
          container: 'body'
        });
      }
    });

Error Details:

Uncaught ReferenceError: Tooltip is not defined at eventDidMount (calender:1560) at t.componentDidMount (main.min.self368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js?body=1:7) at main.min.self-368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js?body=1:7 at Array.some () at main.min.self-368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js?body=1:7 at Array.some () at I (main.min.self-368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js?body=1:7) at main.min.self-368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js?body=1:7 at Array.some () at w (main.min.self-368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js?body=1:7)

It seems you didn't include `tooltip.js` in your page. But if you're using bootstrap in your page already, then using tooltip.js for your tooltips doesn't make a lot of sense anyway - you should just use bootstrap's built-in tooltips instead. — ADyson, Mar 17 '21 at 01:15

score 8 · Answer 1 · answered Jun 17 '21 at 15:58

If you use bootstrap and Full Calendar v5+, you have to use $().tooltip(options) instead of var tooltip = new Tooltip().

Try:

document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        eventDidMount: function (info) {
            $(info.el).tooltip({
                title: info.event.extendedProps.description,
                container: 'body',
                delay: { "show": 50, "hide": 50 }
            });
        },
        events: [
            {
                title: 'All Day Event',
                description: 'description for All Day Event',
                start: '2021-06-01'
            },
            {
                title: 'Long Event',
                description: 'description for Long Event',
                start: '2021-06-07',
                end: '2021-06-10'
            }
        ]
    });

    calendar.render();
});

Many options can be passed to Bootstrap Tooltips (like 'delay' in my example). Please see this.

You don't _have_ to, but it certainly makes sense to do so. – ADyson Jun 17 '21 at 16:47 — ADyson, Jun 17 '21 at 16:47

Uncaught ReferenceError: Tooltip is not defined

1 Answers1