当前位置: 首页 > 知识库问答 >
问题:

全日历调度程序中的工具提示不工作

萧韬
2023-03-14

我试图向fullcalendar scheduler 5.8添加工具提示,但未能实现此功能。

在fullcalendar调度程序模板中,我添加了“工具提示”和“popper”库以及CSS,它们可以处理简单的fullcalendar,但没有结果。我的模板起点是https://fullcalendar.io/docs/event-tooltip-demo

工具提示模板示例图像

在Javascript代码中,我使用了“EventDidMount”函数,因为我知道这是正确的最新方法。

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

另一方面,当我用标准全日历尝试时,工具提示是可见的,并按预期显示。

是否可以向premium fullcalendar添加工具提示?如果可能的话,请问我的错在哪里?

你可以在代码笔中看到我的例子。。。

https://codepen.io/angelbonet/pen/poeMOaW

共有1个答案

宗政法
2023-03-14

我自己找到了答案,我想分享解决方案。

这是一系列错误。

有些库不是必需品(如引导)

使用的工具提示功能是

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

您可以在本例中看到解决方案。。。

代码

 类似资料:
  • 我正在尝试向fullcalendar添加工具提示。我使用角度2模块(ap-angular2-fullcalendar)。工具提示需要以编程方式创建,以便工具提示内容与事件内容匹配(例如:描述)。 我试图使用qchat和材料MatToolTip库,但没有成功(我设法将工具提示添加到DOM,但它不起作用)。

  • 我正在从Priming设置fullcalendar事件的工具提示。当我运行代码时,我会在web控制台中看到初始化的工具提示,但当我将鼠标放在事件上时,我看不到它。 我正在用Typescript开发,Priming 7.0。5,6。我正在使用fullcalendar v4。0,我遵循eventRender页面中的工具提示示例。 有我的代码: 贷款组成部分ts 贷款组成部分html 将结果输入我的控制

  • 完整日历组件: 标题中包含Tooltip.js 正在尝试在react中创建此演示,但在react版本中不起作用。 但是工具提示不起作用 全日历反应示例项目示例项目反应全日历

  • 我想在Adam Shaw的完整日历中显示事件的引导工具提示。我尝试了以下代码: 但它不起作用。这里怎么了?

  • 我正在我的表单上使用引导工具提示版本3和JQuery,它有不同宽度的文本框。我想知道是否有办法根据工具提示所在的元素调整工具提示的宽度。i、 我希望工具提示内容显示在一行中,直到达到元素的宽度。一旦工具提示宽度超过它所在的元素,它将自动在下一行显示内容。这是否可以使用引导工具提示? HTML: CSS:

  • 我在我的php站点中使用fullcalendar。我用eventSources加载事件,给它一个url重定向到我的php控制器,该控制器生成json数据。在呈现日历之前,我希望每个事件都有工具提示。为此,我编写了一个javascript函数,用于添加工具提示: 其中内容是html内容。该函数在日历渲染之后运行。呈现日历后,工具提示不显示。 为了解决这个问题,我尝试将该函数添加到datesRende