fullcalendar5 with custom pop up

fullcalendar5-with-pop-up.md

<style>
    .tooltipevent {
        width: 400px;
        background: #ccc;
        position: absolute;
        z-index: 10001;
        transform: translate3d(-50%, -100%, 0);
        font-size: 0.8rem;
        box-shadow: 1px 1px 3px 0px #888888;
        line-height: 1rem;
    }

    .tooltipevent div {
        padding: 10px;
    }

    .tooltipevent div:first-child {
        font-weight: bold;
        color: White;
        background-color: #888888;
        /* border: 5px solid red; */
    }

    .tooltipevent div:last-child {
        background-color: whitesmoke;
        position: relative;
    }

    .tooltipevent div:last-child::after,
    .tooltipevent div:last-child::before {
        width: 0;
        height: 0;
        border: solid 5px transparent;
        /* box-shadow: 1px 1px 2px 0px #888888; */
        border-bottom: 0;
        border-top-color: whitesmoke;
        position: absolute;
        display: block;
        content: "";
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
    }

    .tooltipevent div:last-child::before {
        border-top-color: #888888;
        bottom: -5px;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            // plugins: [momentPlugin, dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
            initialView: 'dayGridMonth',
            // themeSystem: 'bootstrap',
            dayMaxEvents: true,
            height: 600,
            selectable: true,
            editable: true,
            headerToolbar: {
                left: 'today,prev,next',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            eventClick: function (info) {
                var eventObj = info.event;
                // console.log(eventObj.extendedProps.description);
            },
            // eventDidMount: function (info) {
            //     $(info.el).tooltip({
            //         title: info.event.title + '. Total Points: ' + info.event.extendedProps.points,
            //     });
            // },
            eventMouseEnter: function (info) {
                const tis = info.el;
                const top = ($(tis).offset().top - 5);
                const left = ($(tis).offset().left + ($(tis).width()) / 2);
                const tooltip = '<div class="tooltipevent" style="top:' + top + 'px;left:' + left + 'px">' + info.event.extendedProps.popUpContent + '</div>';
                const $tooltip = $(tooltip).appendTo('body');
            },
            eventMouseLeave: function (info) {
                console.log('eventMouseLeave');
                $(info.el).css('z-index', 8);
                $('.tooltipevent').remove();
            },
            events: 'calendar.php?action=api',
            eventColor: '#378006',
        });

        calendar.render();
    });

</script>

<div class="container">
    <div id='calendar'></div>
</div>

API data returns

[
   {
      "id":"1",
      "title":"Beck Depression Inventory",
      "description":"This questionnaire consists of 21 groups of statements. Please read each one carefully. Then choose one from each group, the one that best describes how you have felt the last two weeks, including today. Circle the number corresponding to the sentence chosen. If several sentences from the same group seem equally appropriate, mark the highest number. Check that you have not chosen more than one per group, including item 16 (changes in sleep habits) and item 18 (changes in appetite).",
      "start":"2021-10-04",
      "end":"2021-10-04",
      "color":"#EE2190",
      "points":"7",
      "quizId":"1",
      "fullName":"Neeraj Tagn",
      "popUpContent":"
\r\n
\r\n
\r\n
\r\n \r\n Quiz Name:   Beck Depression Inventory<\/span>\r\n <\/span>\r\n <\/li>\r\n
\r\n \r\n Total Points:   7<\/span>\r\n <\/span>\r\n <\/li>\r\n
\r\n \r\n Submitted:   2021-10-04<\/span>\r\n <\/span>\r\n <\/li>\r\n
\r\n \r\n Description:   This questionnaire consists of 21 groups of statements. Please read each one carefully. Then choose one from each group, the one that best describes how you have felt the last two weeks, including today. Circle the number corresponding to the sentence chosen. If several sentences from the same group seem equally appropriate, mark the highest number. Check that you have not chosen more than one per group, including item 16 (changes in sleep habits) and item 18 (changes in appetite).<\/span>\r\n <\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>"
   },
   {
      "id":"2",
      "title":"Young Mania Rating Scale (YMRS)",
      "description":"The YMRS is typically administered by a third-party clinician, but it is provided here, in a slightly reworded form, as a self-assessment. This may not be as accurate when self-administered, as people suffering from mania are often unable to properly assess relevant outward symptoms.",
      "start":"2021-10-04",
      "end":"2021-10-04",
      "color":"#0DD7EE",
      "points":"3",
      "quizId":"2",
      "fullName":"Neeraj Tagn",
      "popUpContent":"
\r\n
\r\n
\r\n
\r\n \r\n Quiz Name:   Young Mania Rating Scale (YMRS)<\/span>\r\n <\/span>\r\n <\/li>\r\n
\r\n \r\n Total Points:   3<\/span>\r\n <\/span>\r\n <\/li>\r\n
\r\n \r\n Submitted:   2021-10-04<\/span>\r\n <\/span>\r\n <\/li>\r\n
\r\n \r\n Description:   The YMRS is typically administered by a third-party clinician, but it is provided here, in a slightly reworded form, as a self-assessment. This may not be as accurate when self-administered, as people suffering from mania are often unable to properly assess relevant outward symptoms.<\/span>\r\n <\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>"
   }
]

output