【问题标题】:Trying to get a tooltip shown in eventRender from the fullcalendar documentation尝试从 fullcalendar 文档中获取 eventRender 中显示的工具提示
【发布时间】:2019-04-26 09:37:26
【问题描述】:

我正在开发一个完整的日历概览界面,使用:服务器上的 Flask-python 和客户端上的 html jinja2 js。

现在我正在尝试使用 tooltip.js 在悬停或单击时创建工具提示。

我有一个错误将我带到 popper.js 索引。

这是我的基本 js:

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

    var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['dayGrid'],
            defaultView: 'dayGridMonth',

            eventRender: function(info) {
             var tooltip = new Tooltip(info.el, {
                    title: "info.event.extendedProps.description",
                    placement: 'top',
                    trigger: 'hover',
                    container: 'body'
                  });
        },
        events: {{hour}}           

    });

    calendar.render();

  });

据我所见,如果我将鼠标悬停在工具提示 div 上,则会调用 le eventRender,但我收到此错误:

Uncaught TypeError: a is not a constructor
at g.value (index.js:246)
at index.js:381

引用这个:

this.popperInstance = new Popper(
  reference,
  tooltipNode,
  this._popperOptions
);

【问题讨论】:

  • 我刚刚以同样的方式遇到了同样的错误,我的搜索结果找到了这个线程。如果我弄清楚了,我会告诉你的。否则,也让我知道。
  • 您可以在此处查看使用 tooltip.js 的工作版本:codepen.io/anon/pen/ZZdgMb?&editable=true&editors=001。在fullcalendar.io/docs/eventRender 记录的fullCalendar 中已经有一个指向它的链接。此版本不会产生错误。我建议您将其与您的版本(代码本身、您正在加载的库及其版本号)进行比较,并确保您没有遗漏任何重要的内容。

标签: javascript fullcalendar tooltip popper.js


【解决方案1】:

万一其他人遇到这种情况——如果你没有使用 Bootstrap,很可能是由于你加载 Popper 和 Tooltip 的顺序。

Popper.js 是 Tooltip.js 的依赖,所以必须在 Tooltip.js 之前加载。 a is not a constructor,因为a就是undefined,而看源码的话a代表的是Popper。

【讨论】:

    【解决方案2】:

    我的问题是 boostrap 和 popper js 之间的导入冲突, 为了解决它,我更改了我正在使用的框架 materialize 以避免问题,因为我无法让它与 boostrap js 一起使用 (我认为 boostrap 有他自己的 tooltip 和 popper 功能,这可能是问题所在)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-12-03
      • 1970-01-01
      • 1970-01-01
      • 2020-02-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多