FullCalendar 事件的布尔玛工具提示答案

【问题标题】：Bulma Tooltip for FullCalendar eventFullCalendar 事件的布尔玛工具提示
【发布时间】：2019-02-13 00:50:45
【问题描述】：

我使用 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>

【问题讨论】：

span 将是“children”数组的第一个元素的子元素（即，它是您当前添加类的元素的子元素）。所以我希望再次调用 children() 可能会有所帮助。
我也希望它不是:( 'children' 变量的计算结果是带有封闭 span 标签的 div 的 html 字符串。
我不明白这怎么可能。 .children() 总是返回一个 jQuery 数组。这是一个演示：jsfiddle.net/ctg479zf/1。这是documentation。但是有一种更简单的方法可以做到这一点，而不必繁琐地遍历 DOM - 请参阅下面的答案。

标签： jquery fullcalendar bulma

【解决方案1】：

由于您知道<span> 的类是fc-title，因此您可以使用.find() 更轻松地访问该元素。 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>

【讨论】：

您的代码示例有效，这意味着现在正在修改正确的元素。不幸的是，事件的工具提示没有显示。我在这里发布了一个完整的例子：bulma-fullcalendar-goof.azurewebsites.net/example.html
好吧，您专门询问了针对跨度的问题，我对此进行了解释。我不熟悉您提到的特定“bulma”库，所以我不确定我能提供多少帮助。据我猜测，这可能是 fullCalendar CSS 中的干扰 - 例如与 z 索引、不透明度、定位等有关。通过检查示例站点中的元素，您可以看到工具提示肯定已添加到跨度中，并且您可以使用元素检查器（在 Chrome 开发工具中）看到它应该在哪里，但它只是没有显示。我认为需要一些调试