时间戳

首页 > 解决方案 > FullCalendar 事件的布尔玛工具提示

jquery - FullCalendar 事件的布尔玛工具提示

问题描述

我正在使用 Bulma 作为我的 css 框架，并且在为事件创建工具提示时遇到问题。这是我的代码：

eventRender: function(event, element, view) {
    let children = element.children();

    if (children.length == 1) {
        $(children[0]).addClass('tooltip');
        $(children[0]).attr('data-tooltip', event.title);
    };
},

代码添加了预期的类和属性，但工具提示没有显示:( 这是它呈现的内容。可能需要将类和数据属性添加到 span 标签中。如何访问 span 标签？

<div class="fc-content tooltip" data-tooltip="gas">
    <span class="fc-title">gas</span>
</div>

标签： jqueryfullcalendarbulma

解决方案

由于您知道 is 的类，因此<span>您可以使用.find()fc-title更轻松地访问该元素。Find() 与 children() 的不同之处在于它将遍历 DOM 的多个级别，直到找到您给它的选择器，而 children() 则在第一级停止。

演示：

var element = $("#el");
var span = element.find(".fc-title");
span.addClass('tooltip').attr('data-tooltip', "XYZ");
console.log(span[0]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="el">
  <div>
    <span class="fc-title">gas</span>
  </div>
</div>

推荐阅读