CODEWITHSUNDEEP
fullcalendar
tk1573
tk1573

Reputation: 21

Event ToolTip not displaying in FullCalendar

I've been working with the FullCalendar configuration for a little bit now but I've reached a point that I just can't get figured out. I want to enable to tooltips to appear when the end user hovers over the event. I would like to give a little further information in the tooltip for the event, such as a phone contact number, etc.

I've tried a number of different options that I was able to find.
The list of links below for example.
FullCalendar event popup
http://jsfiddle.net/m54g5aen/
Fullcalendar / eventdidmount - issue with "more link"

I'll pulling in my events via a JSON array from a PHP script. Here is my Calendar rendering code.

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            height: 550,
            slotDuration: {minutes: 15},
            nowIndicator: true,
            allDaySlot: false,
            eventBackgroundColor: '#916FDF',
            slotMinTime: "08:00:00",
            slotMaxTime: "20:00:00",
            displayEventEnd: false,
            initialView: 'timeGridWeek',
            events: <?php print json_encode($events); ?>,
            eventDidMount: function(info) {
               var tooltip = new Tooltip(info.el, {
                    title: info.event.extendedProps.description,
                    placement: 'top',
                    trigger: 'hover',
                    container: 'body'
               });
            },
            customButtons: {
                addNewAppointment: {
                    text: 'New Appt',
                    click: function() {
                        window.location.href="../client/newAppointment.php";
                    }
                }
            },
            headerToolbar: {
                left: 'title',
                center: 'dayGridMonth timeGridWeek',
                right: 'prev next today addNewAppointment'
            }
        });
        calendar.render();
    });

</script>

My PHP to pull the events is as follows:

<?php
    require_once('../db_connect.php');

    // Check to see if the session is already started. 
    if (session_status() === PHP_SESSION_NONE) {
        session_start();
    }

    $query = 'SELECT
                CONCAT(client.cl_fName, " ", client.cl_lName) AS "title",
                CONCAT(appointment.sched_date,"T", appointment.start_time) AS "start",
                CONCAT(appointment.sched_date,"T", appointment.end_time) AS "end",
                CONCAT("TEST", " DESCRIPTION") AS "description"
                        FROM
                            appointment, client
                        WHERE appointment.client_id = client.client_id';
                
    $statement = $db1->prepare($query);
    $statement->execute();
    $events = $statement->fetchAll();
    $statement->closeCursor();

?>

I appreciate all suggestions. Thank you in advance.

Upvotes: 2

Views: 4312

Answers (1)

brodrigs
brodrigs

Reputation: 344

Try using a popover instead of a tooltip, it's better than a tooltip if you wanna add more info to it.

change youreventDidMount to

eventDidMount: function (info) {
            $(info.el).popover({
                title: info.event.title,
                placement: 'top',
                trigger: 'hover',
                content: 'more info on the popover if you want',
                container: 'body'
            });
        }

Upvotes: 6

Related Questions