Bulma Tooltip для события FullCalendar - PullRequest
Новая
       14

Bulma Tooltip для события FullCalendar

0 голосов
/ 13 февраля 2019

Я использую 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);
    };
},

Код добавляет ожидаемый класс и атрибут, но всплывающая подсказка не отображается :( Вот что он отображает. Может быть, необходимо добавить атрибут class и data в тег span. Как я могу получить доступ к тегу span? 

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

1 Ответ

0 голосов
/ 14 февраля 2019

Поскольку вы знаете, что класс <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>
...