FullCalendar eventLimit弹出层内Tooltip失效，求后置初始化事件

我完全懂你碰到的这个问题——当FullCalendar的eventLimit弹出层（也就是popover）展开时，里面的事件Tooltip根本没法正常触发，而且eventLimitClick的触发时机太早，赶不上弹出层生成后的初始化需求，确实挺闹心的。

下面给你两个可行的解决方案，亲测有效：

方法一：监听Bootstrap Popover的shown.bs.popover事件 #

因为FullCalendar在eventLimitClick返回"popover"时，本质上是调用了Bootstrap的popover组件，所以我们可以利用它的shown.bs.popover事件——这个事件会在popover完全渲染并显示后触发，刚好满足我们的需求：

$(function() {
  $('#calendar').fullCalendar({
    defaultView: 'month',
    defaultDate: '2018-03-07',
    header: {
      left: 'prev,next',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    eventRender: function (event, element) {
      element
        .attr('title', event.title)
        .attr('data-placement', 'bottom')
        .attr('data-toggle', 'tooltip');
    },
    eventLimit: 2, // 超过2个事件显示"更多"链接
    eventAfterAllRender: function () {
      $('[data-toggle="tooltip"]').tooltip({ container: 'body', html: true });
    },
    eventLimitClick: function () {
      return "popover";
    },
    events: [
      { title: 'All Day Event', start: '2018-03-01' },
      { title: 'Long Event', start: '2018-03-07', end: '2018-03-10' },
      { id: 999, title: 'Repeating Event', start: '2018-03-09T16:00:00' },
      { id: 999, title: 'Repeating Event', start: '2018-03-16T16:00:00' }
    ]
  });

  // 监听popover完全显示的事件
  $(document).on('shown.bs.popover', function(e) {
    // 找到当前popover内部的tooltip元素并初始化
    $(e.target).next('.popover').find('[data-toggle="tooltip"]').tooltip({ 
      container: 'body', 
      html: true 
    });
  });
});

方法二：用MutationObserver监控DOM变化 #

如果不想依赖Bootstrap的组件事件，还可以用原生的MutationObserver来监控页面DOM的变化，一旦检测到新的popover元素被添加，就立即初始化里面的Tooltip：

$(function() {
  $('#calendar').fullCalendar({
    // 你的日历配置和之前一致...
  });

  // 创建DOM变化监听器
  const tooltipObserver = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      // 检查是否有新的popover元素被添加到DOM
      const newPopover = $(mutation.addedNodes).filter('.popover');
      if (newPopover.length > 0) {
        newPopover.find('[data-toggle="tooltip"]').tooltip({ 
          container: 'body', 
          html: true 
        });
      }
    });
  });

  // 开始监控body下的所有子节点变化
  tooltipObserver.observe(document.body, {
    childList: true,
    subtree: true
  });
});

为什么之前的eventLimitClick无效？ #

简单说就是时机不对：eventLimitClick是在FullCalendar准备创建popover之前触发的，这时候popover还没被添加到DOM里，你当时调用$('[data-toggle="tooltip"]').tooltip()根本找不到弹出层里的元素，自然没法完成初始化。

内容的提问来源于stack exchange，提问作者user1477388