如何实现全日历工具提示答案

【问题标题】：How to implement fullcalendar tooltip如何实现全日历工具提示
【发布时间】：2019-09-17 22:02:01
【问题描述】：

我正在尝试将工具提示添加到完整日历。我使用 Angular 2 模块（ap-angular2-fullcalendar）。工具提示需要以编程方式创建，以便工具提示内容与事件内容相匹配（例如：描述）。

我尝试使用 qtip 和 material MatToolTip 库但没有成功（我设法将工具提示添加到 DOM，但它不起作用）。

【问题讨论】：

如果没有看到您的作品，人们很难提供帮助。您可以在问题中添加minimal reproducible example 吗？

【解决方案1】：

您需要使用eventRender 例如

      eventRender: function(eventObj, $el) {
        $el.popover({
          title: eventObj.title,
          content: eventObj.description,
          trigger: 'hover',
          placement: 'top',
          container: 'body'
        });
      },

查看工作示例 here - 请注意此示例依赖于 Bootstrap 和 Popper.js

您也可以使用 Bootstrap 工具提示而不是弹出框，例如

      eventRender: function(event, element) {
        $(element).tooltip({title: event.tooltip,
                  container: 'body',
                  delay: { "show": 500, "hide": 300 }
        });
      },

【讨论】：

嗨，它似乎没有工作被捕获 TypeError: element.popover is not a function 。 eventRender: (event, element) => { element.popover({ title: event.title, content: event.description, trigger: 'hover', place: 'top', container: 'body' }); }
嗨@Adam007，popover 带有 Bootstrap 和 Popover.js，因此您需要确保正确加载 Bootstrap 和 Popover 库。如果您查看我链接到的工作示例的源代码，您将看到如何将它们都包含在内。还要确保它们的顺序正确。查看源代码：fullcalendar.io/docs/event-tooltip-demo
您好木马，问题是我不想包含引导库。我使用角度框架，没有它它会更好地工作。反正Tnx很多