全日历向事件添加工具提示

Question

我在我的 php 网站中使用 fullcalendar。我使用 eventSources 加载事件，给它一个重定向到我的 php 控制器的 url，该控制器生成 json 数据。在渲染日历之前，我希望每个事件都有一个工具提示。为此，我编写了一个 JavaScript 函数来添加工具提示：

 function dailyTooltip(){
   $('.fc-day-grid-event, .fc-time-grid-event').each(function(){
      var content = $(this).data('content');
      $(this).attr('title',''); 
      $(this).tooltip({
       tooltipClass: 'event-tooltip',
       content: content,
      }); 
   });
 }

其中内容是 html 内容。该函数在日历渲染后运行。 渲染日历后，不显示工具提示。

为了解决这个问题，我尝试将函数添加到datesRender和eventRender中。 dateRender 似乎可以工作，但仅当我更改视图时（例如从 timeGrid 到 dayMonthGrid）。 eventRender 不起作用。

Answer 1

您可以将

Tooltip.js

与

fullcalendar eventRender

一起使用来显示工具提示，

<script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>

您可以像这样使用事件渲染函数：

eventRender: function(info) {
        var tooltip = new Tooltip(info.el, {
          title: info.event.extendedProps.description,//you can give data for tooltip
          placement: 'top',
          trigger: 'hover',
          container: 'body'
        });
      },

查看事件渲染工具提示全日历演示

Answer 2

我知道这是一篇旧文章，但如果有人找到这篇文章。 FullCalendar v5 有一个悬停示例。 https://fullcalendar.io/docs/event-tooltip-demo

您也可以通过码笔查看（右上角按钮）

确保添加两个js脚本。 https://unpkg.com/popper.js/dist/umd/popper.min.js https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js

Answer 3

在fullcalendar.js V5中，没有eventRender。所以我所做的是每次点击日历标题上的任何按钮时我都会创建他们的工具提示

<script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>


const calendarControlBtns = Array.from(
  document.querySelectorAll('.fc-header-toolbar button')
);
calendarControlBtns.forEach((singleControlBtn) => {
  singleControlBtn.addEventListener('click', handleNewInterval);
});
const handleNewInterval = (e) => {
  const allEvents = Array.from(document.querySelectorAll('.fc-timegrid-event'));
  allEvents.forEach((singleEvent) => {
    singleEvent.dataset.toggle = 'tooltip';
    const title = singleEvent.querySelector('.fc-event-title').innerHTML;
    singleEvent.dataset.title = title;
  });
  $('[data-toggle="tooltip"]').tooltip();
}

Answer 4

对于任何使用旧版本的人。 我必须使用日历的 V2，我的做法是有一个带有工具提示的 div：

<div id="tooltip-span" class="my-tooltip" style="display: none">Hover me</div>

使用这个CSS：

.my-tooltip {
        position: absolute;
        z-index: 9999;
        background: #7F8C8D;
        color: white;
        width: 150px;
        border-radius: 3px;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
        padding: 10px;
        text-align: center;
    }

然后就用了eventMouseover和eventMouseout，可以参考：https://fullcalendar.io/docs/v3/eventMouseover 在这种情况下从V3到以下 然后这是我的活动：

eventMouseover: function(event, jsEvent, view) {
    var tooltipSpan = document.getElementById('tooltip-span');
    tooltipSpan.innerHTML = event.msg;
    var x = jsEvent.originalEvent.clientX + 10; // Adjust positioning as needed
    var y = jsEvent.originalEvent.clientY + 10; // Adjust positioning as needed
    tooltipSpan.style.top = y + 'px';
    tooltipSpan.style.left = x + 'px';
    tooltipSpan.style.display = 'block'; // Show the tooltip
},
eventMouseout: function(event, jsEvent, view) {
    var tooltipSpan = document.getElementById('tooltip-span');
    tooltipSpan.style.display = 'none'; // hide the tooltip
},

对我来说一切正常，并且由于我无法升级日历版本而必须采取此解决方法。