javascript - yii2 fullcalendar 向元素添加弹出窗口

Question

我能够使用代码添加事件描述

<script>
var JSEventClick = (function(calEvent, jsEvent, view) {
    for (var element of document.getElementsByClassName('fc-title')) {
    element.innerHTML += calEvent.nonstandard.field1
}
});
</script>

使用来自此链接的答案的帮助 - yii2 Fullcalendar - Why is alert for CalEvent working but not for updating innerHtml?

现在我想在鼠标悬停事件上添加与弹出窗口相同的内容。

<?= \yii2fullcalendar\yii2fullcalendar::widget(array(
      'events'=> $events,
      'id'=>'calendar',

       'clientOptions' => [ 
        'editable' => true,
        'eventSources' => ['/eventcalendar/index'],
        'draggable' => true,
        'droppable' => true,
        'eventClick' => new JsExpression('JSEventClick'),
        ],

  ));?>

这工作正常。

相关的 html 如下所示:

<td class="fc-event-container">
<a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end fc-draggable fc-resizable">
<div class="fc-content"> 
<span class="fc-title">IPS Annual Day</span></div>
<div class="fc-resizer fc-end-resizer"></div></a></td>

我如何实现这一点，即 calEvent.nonstandard.field1 中的信息在鼠标悬停时显示为弹出窗口。

Answer 1

我找到了适合我的解决方案，希望其他人会发现它有用。

 <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <?= \yii2fullcalendar\yii2fullcalendar::widget([
    'events' => $events,
    'eventRender' => new JsExpression(
    <<<'JS'
    (eventObj, $el)=>{
        $el.popover({
        title: eventObj.title,
            content: eventObj.nonstandard.field1,
            trigger: 'hover',
            placement: 'top',
            container: 'body'
    });
    }
JS
            )
        ]);

?>
  </div>

这里的field1是controller中events数组传入的非标准字段。