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

如何实现全日历工具提示

仇承志
2023-03-14

我正在尝试向fullcalendar添加工具提示。我使用角度2模块(ap-angular2-fullcalendar)。工具提示需要以编程方式创建,以便工具提示内容与事件内容匹配(例如:描述)。

我试图使用qchat和材料MatToolTip库,但没有成功(我设法将工具提示添加到DOM,但它不起作用)。

共有1个答案

黄沈浪
2023-03-14

你需要使用eventRender例如。

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

请参阅此处的工作示例-注意,此示例依赖于引导和Popper。js

您也可以使用Bootstrap工具提示,而不是弹出窗口。

      eventRender: function(event, element) {
        $(element).tooltip({title: event.tooltip,
                  container: 'body',
                  delay: { "show": 500, "hide": 300 }
        });
      },
 类似资料:
  • 我正在从Priming设置fullcalendar事件的工具提示。当我运行代码时,我会在web控制台中看到初始化的工具提示,但当我将鼠标放在事件上时,我看不到它。 我正在用Typescript开发,Priming 7.0。5,6。我正在使用fullcalendar v4。0,我遵循eventRender页面中的工具提示示例。 有我的代码: 贷款组成部分ts 贷款组成部分html 将结果输入我的控制

  • 我试图向fullcalendar scheduler 5.8添加工具提示,但未能实现此功能。 在fullcalendar调度程序模板中,我添加了“工具提示”和“popper”库以及CSS,它们可以处理简单的fullcalendar,但没有结果。我的模板起点是https://fullcalendar.io/docs/event-tooltip-demo 工具提示模板示例图像 在Javascript代

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

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

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

  • 问题内容: 我想为工具提示创建一个自定义CSS类,该类将包裹长度超过25-30的字符串。通常这样长的文本不适合tootltip文本区域。 而且是否有使用[工具提示ui.bootstrap.tooltip)进行此操作?就像使用自定义CSS类来获取所需的输出。 这是简单的CSS工具提示 这是相同的代码片段: 问题答案: CSS解决方案 对于眼前的问题有一个非常简单的解决方案。我基本上添加的是以下CSS