在 fullcalendar 事件中，工具提示不可見

Question

在我的 Laravel 5.8 / Bootstrap v4.1.2 / jquery v3.3.1 fullcalendar v4.3.1 應用程序中，我想將工具提示添加到 fullcalendar 的事件中並查看此示例https://codepen.io/pen/?&editable=true&editors=001

我這樣做：

eventRender: function (eventInfo) {
    console.log("eventInfo" )
    console.log( eventInfo )

    console.log("eventInfo.el" )
    console.log( eventInfo.el )

   var tooltip = new Tooltip(eventInfo.el, {        
        title: 'Lorem  ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  tempor', //eventInfo.event.extendedProps.description,
        placement: 'top',
        trigger: 'hover',
        container: 'body'
    });

    eventInfo.el.querySelector('.fc-title').innerHTML += "<i class='fa fa-external-link pull-right'" +
        " onclick=\"javascript:backendEvent.editCalendarEvent(event," + eventInfo.event.id + "); return" +
        " false;\">Edit</i>";

    return;

我在控制台中沒有任何錯誤，也沒有工具提示文本。

在控制台中，我看到 eventInfo.el 為： https ://imgur.com/a/S9GuW2V 我想它們是有效元素

在我的 resources/views/admin/event/index.blade.php 我包括：

<script src="{{ asset('js/fullcalendar/core/main.js') }}"></script>
<!-- FullCalendar Core Package v4.3.1 -->


<script src="{{ asset('js/fullcalendar/daygrid/main.js') }}"></script>
<!-- FullCalendar Day Grid Plugin v4.3.0 -->


<script src="{{ asset('js/popper.min.js') }}"></script>
<!--   Copyright (C) Federico Zivolo 2019 -->    


<script src="{{ asset('js/tooltip.min.js') }}"></script>
<!-- Copyright (C) Federico Zivolo 2019 -->
In the example I see that tooltip var is created but never used . Is it ok ?

How to fix it ?

修改塊：

所有 js 功能都在 public/js/defaultBS41Backend/admin/event.js 文件中，它在 fullcalendar 文件之后加載： https ://imgur.com/a/eMcCQKa

FullCsalendar 在 js 函數中初始化：

backendEvent.prototype.evenstLoadWithFullCalendar = function () {
    var dataArray = {
        "_token": this_csrf_token,
        "filter_event_name": $("#filter_event_name").val(),
        "filter_start_date": $("#filter_start_date").val(),
        "filter_end_date": $("#filter_end_date").val(),
        "filter_type": $("#filter_type").val(),
        "filter_status": $("#filter_status").val()
    }

    var href = this_backend_home_url + "/admin/get_events_fc_listing";
    $.ajax({
        type: "POST",
        dataType: "json",
        url: href,
        data: dataArray,
        success: function (response) {
            if (response.error_code == 0) {
                initFullCalendar(response.events);
            }
        },
        error: function (error) {
            popupErrorMessage(error.responseJSON.message)
        }
    });

}


function initFullCalendar(eventsList) {
    if (typeof window.calendarEventsObject != "undefined") { // clear existing instance
        window.calendarEventsObject.destroy();
    }

    var calendarEl = document.getElementById('events_calendar');

    var effective_device_width = effectiveDeviceWidth('width') //TODO

    window.calendarEventsObject = new FullCalendar.Calendar(calendarEl, {
        plugins: ['dayGrid'],

        eventRender: function (eventInfo) {
            console.log("eventInfo" )
            console.log( eventInfo )

            console.log("eventInfo.el" )
            console.log( eventInfo.el )

           var tooltip = new Tooltip(eventInfo.el, {        // example : https://fullcalendar.io/docs/event-tooltip-demo
                // title: eventInfo.event.extendedProps.description,
                title: 'Lorem  ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  tempor', //eventInfo.event.extendedProps.description,
                placement: 'top',
                trigger: 'hover',
                container: 'body'
            });

            eventInfo.el.querySelector('.fc-title').innerHTML += "<i class='fa fa-external-link pull-right'" +
                " onclick=\"javascript:backendEvent.editCalendarEvent(event," + eventInfo.event.id + "); return" +
                " false;\">Edit</i>";

        },

        events: eventsList,
        // events: [],

        header: {
            left: 'LEFT98',
            center: 'title123',
            right: 'Right 444'
        },

        showNonCurrentDates: false,

        editable: true,
        allDaySlot: true,
        selectable: true,
        selectHelper: true,
        selectOverlap: false,
        fixedWeekCount: false,

        aspectRatio: 0.4,
        height: 700,

        select: function (start, end) {
            alert( "select:::"+var_dump(-50) )
            var title = "Available";
            var evid = SaveEvent(start, end, '1');
            $('#events_calendar').fullCalendar('unselect');
        },

        eventClick: function (clickObj) {
            alert( "eventClick clickObj.el::"+var_dump(clickObj.el) )
            if (clickObj.el.href != "") {
                // alert( "::"+var_dump(-4) )
                let el_href = clickObj.el.href
                clickObj.el.href = ""
                window.open(el_href, "_blank");
                // clickObj.event.preventDefault();
                alert( "::"+var_dump(-41) )
                return false;
            }
            return false;
        },
    });

    window.calendarEventsObject.render(
        {
            backgroundColor: 'green',
            textColor: 'yellow',
        }
    );

    jQuery('.eo-fullcalendar').on('click', '.fc-event', function (e) {
        e.preventDefault();
        window.open(jQuery(this).attr('href'), '_blank');
    });

}   // function initFullCalendar() {

我知道當數據用 ajax 加載時（就像我的情況一樣）它可能會引發一些 jquery 組件的問題。 是不是在我用ajax加載數據后我必須再初始化工具提示1？

Answer 1

在我的情況下，有效的決定是：

eventRender: function (eventInfo) {

    $(eventInfo.el).tooltip({                
        title: "<i class=\"fa fa-users\"></i>&nbsp;<b>"+eventInfo.event.extendedProps.attendees_count+"&nbsp;attendee(s)</b>" +
            " <br><smalUUl>"+eventInfo.event.extendedProps.description+"</smalUUl>",
        html: true,
    });

},

其中描述和參加者_計數我的自定義字段發送到事件。 沒有任何附加庫

Answer 2

eventAfterAllRender: function(view){
   $('.has-tooltip').tooltip({container:'#calendar',placement:'top'});
},

您可以放置​​ eventAfterAllRender 來顯示工具提示