未捕获的 ReferenceError：未定义工具提示答案

【问题标题】：Uncaught ReferenceError: Tooltip is not defined未捕获的 ReferenceError：未定义工具提示
【发布时间】：2021-03-16 11:00:13
【问题描述】：

我在 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：未在 eventDidMount 中定义工具提示（日历：1560）在 t.componentDidMount （main.min.self368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js?body=1:7）在 main.min.self-368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js?body=1:7 在 Array.some() 处 main.min.self-368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js?body=1:7 在 Array.some () 在我（main.min.self-368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js?body=1:7）在 main.min.self-368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js?body=1:7 在 Array.some () 在 w (main.min.self-368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js?body=1:7)

【问题讨论】：

您的页面中似乎没有包含tooltip.js。但是，如果您已经在页面中使用 bootstrap，那么使用 tooltip.js 作为工具提示无论如何都没有多大意义 - 您应该改用 bootstrap 的内置工具提示。

标签： javascript ruby-on-rails-4 fullcalendar tooltip fullcalendar-5

【解决方案1】：

如果您使用引导程序和完整日历 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();
});

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

【讨论】：

你没有必须这样做，但这样做当然是有意义的。