Event tooltip implementation

[farmitaroma]

Hi there,

I've implemented a tooltip feature for this package and I'm sharing the changes I've made, hoping that this feature will be considered for addition:

I added the following dependencies to package.json:
{ "@popperjs/core": "^2.11.8", "uuid": "^9.0.1"}

Then, inside the filament-fullcalendar.js file, i imported:

import {createPopper} from '@popperjs/core';
import { v4 as uuidv4 } from 'uuid';

and I modified the Calendar object options:

eventWillUnmount: function (info) {
                    const tooltip = document.getElementById(info.el.dataset.tooltipId);
                    if (tooltip) {
                        tooltip.remove();
                    }
                },

eventDidMount: function (info) {
                    const id = uuidv4();

                    info.el.dataset.tooltipId = id

                    const tooltipHtml =
                        `<div id="${id}" class="tooltip" role="tooltip" >
                                    ${info.event.extendedProps.popper_title}<br>
                                    ${info.event.extendedProps.description ?? ''}
                                    <div class="arrow" data-popper-arrow></div>
                                </div>`;

                    document.body.insertAdjacentHTML('beforeend', tooltipHtml);

                    const tooltip = document.getElementById(id);

                    const popper = createPopper(info.el, document.getElementById(id), {
                        placement: 'auto',
                        strategy: 'fixed',
                        modifiers: [
                            {
                                name: 'offset',
                                options: {
                                    offset: [0, 8],
                                },
                            },
                        ],
                    })

                    function show() {
                        tooltip.setAttribute('data-show', '');
                        popper.update();
                    }

                    function hide() {
                        tooltip.removeAttribute('data-show');
                    }

                    info.el.addEventListener('mouseenter', show);
                    info.el.addEventListener('mouseleave', hide);
                    info.el.addEventListener('focus', show);
                    info.el.addEventListener('blur', hide);
                    info.el.addEventListener('mousedown', hide);
                }

I also created a tooltip.css file inside the resource/css directory:

.arrow,
.arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
}

.arrow {
    visibility: hidden;
}

.arrow::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
}

.tooltip {
    z-index: 1;
    background-color: black;
    padding: 0.5rem;
    border-radius: 4px;
    color: white;
    display: none;
}

.tooltip[data-show] {
    display: block;
}

.tooltip[data-popper-placement^='top'] > .arrow {
    bottom: -4px;
}

.tooltip[data-popper-placement^='bottom'] > .arrow {
    top: -4px;
}

.tooltip[data-popper-placement^='left'] > .arrow {
    right: -4px;
}

.tooltip[data-popper-placement^='right'] > .arrow {
    left: -4px;
}

This file was then imported into filament-fullcalendar.css:
@import "tooltip.css";

After these changes, providing a 'popper_title' property to a calendar event will display a tooltip with the 'popper_title' value on a calendar event mouseover.

[saade]

Hey, can you share how it looks like visually? Maybe a screenshot or a video

[farmitaroma]

Hi, for sure:

[CharlieEtienne]

Hi, it would be awesome if I could do that without editing vendor files. In month view I can't even see all the event title... Could you give me some advice or directions to implement any type of tooltip/modal on hover or click?

Thanks and thank you for this cool plugin

[cawecoy]

Hi @CharlieEtienne @farmitaroma @saade! I'm proposing a solution for this issue here: PR #164

It will make possible to use the eventDidMount and thus to implement the event tooltip with few lines of code (I am showing an example on how to do it in the PR description).