未捕获的引用错误：工具提示未定义

Question

我在我的 Rails 应用程序 Rails 版本 4.2.11 中使用 Full Calendar v5.3.2。在初始化工具提示时，eventDidMount我收到一个错误，提示工具提示未定义

我在项目中使用 bootstrap.bundle 所以我认为我不需要 popper.js 作为工具提示，但我已经尝试在项目中添加 popper.js 但错误是相同的。

这是我用来初始化日历的代码

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

错误详情：

未捕获的ReferenceError：在t.componentDidMount（main.min.self368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js？body = 1：7）在main.min.self-368cb59d5b的eventDidMount（日历：1560）处未定义工具提示fd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js?body=1:7 在Array.some () 在 main.min.self-368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js?body=1:7 在 Array.some () 在我 (main.min.self-368cb59d5bfd4af3ab7b619eedaad5661cfc37 245ac94224bed5714f0e5e4a5f.js?body=1:7) 在 main.min .self-368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js?body=1:7 在 Array.some () 在 w (main.min.self-368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224 bed5714f0e5e4a5f.js?body=1:7)

Answer 1

如果您使用 bootstrap 和 Full Calendar v5+，则必须$().tooltip(options)使用var tooltip = new Tooltip().

尝试：

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

许多选项可以传递给引导工具提示（例如我的示例中的“延迟”）。请看这个。