Event tooltip breaks when there is a single quote in title

[alboxe]

Event tooltip on hover works fine, but breaks when there is a single quote in event.title. I know this is not a specific Filament-Fullcalendar problem but is there someone who knows a solution? Extra html parameter for Alpine tooltip?

[jncalderon]

Hi, I'm using tippyjs and works well, even Inside of the tooltip I add a Infolist

[alboxe]

The problem is not the tooltip, but the data. When there is a single or a double quote in your data, it breaks, even in tippy.js

[jncalderon]

I don't know, but on my end works well, I know it needs more love, but like I said, even I added a infolist

[alboxe]

Thanks for the quick response. Maybe my conclusion was too quick. I'll look into it again. Op vr 9 aug 2024 om 15:39 schreef jncalderon ***@***.***>:

…

I don't know, but on my end works well, I know it needs more love, but like I said, even I added a infolist Screenshot.at.Aug.09.7-37-19.AM.png (view on web) <https://github.com/user-attachments/assets/4b783ae2-d53f-4fba-83bb-12da155aca9c> — Reply to this email directly, view it on GitHub <#195 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANQM62UFVR3PLOGP37CCOHTZQTBBVAVCNFSM6AAAAABJ7SVDUSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMRYG4ZTANI> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[alboxe]

Hi, can you give me a hint how you implemented tippy.js? Now I'am using the 'Event tootip on hover' of https://filamentphp.com/plugins/saade-fullcalendar#event-tooltip-on-hover Op vr 9 aug 2024 om 22:48 schreef Albert Oxener ***@***.***>:

…

Thanks for the quick response. Maybe my conclusion was too quick. I'll look into it again. Op vr 9 aug 2024 om 15:39 schreef jncalderon ***@***.***>: > I don't know, but on my end works well, I know it needs more love, but > like I said, even I added a infolist > > Screenshot.at.Aug.09.7-37-19.AM.png (view on web) > <https://github.com/user-attachments/assets/4b783ae2-d53f-4fba-83bb-12da155aca9c> > > — > Reply to this email directly, view it on GitHub > <#195 (reply in thread)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/ANQM62UFVR3PLOGP37CCOHTZQTBBVAVCNFSM6AAAAABJ7SVDUSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMRYG4ZTANI> > . > You are receiving this because you authored the thread.Message ID: > <saade/filament-fullcalendar/repo-discussions/195/comments/10287305@ > github.com> >

[jncalderon]

it's pretty easy

// on widget
public function eventDidMount(): string
    {
        return <<<JS
        function(info) {
            tippy(info.el, {
                content: info.event.extendedProps.tooltip,
                allowHTML: true,
                maxWidth: 1000,
            });
        }
    JS;
    }

// on the model
public function toEventData(): EventData
    {
        $event = EventData::make()
            ->id($this->id)
            ->title($this->name)
            ->start($this->starts_at)
            ->end($this->ends_at)
            ->extendedProps([
                'tooltip' => "<div style=\"height=800px\" class=\"bg-white ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 px-3 py-3 mx-3 my-3\">{$this->toInfolist()->toHtml()}</div>",
            ]);
        if ($this->appointmentPriority->color !== null) {
            $event->textColor($this->appointmentPriority->color);
        }
        if ($this->appointmentType->color !== null) {
            $event->borderColor($this->appointmentType->color);
        }
        return $event;
    }

[alboxe]

Last question. I understand your code, but how is toInfolist() implemented? I expect a function in the widget, someting like this:
public function toInfolist(Infolist $infolist): Infolist
{
return $infolist
->schema([
Group::make()
->schema([
TextEntry::make('title')->inlineLabel()->label(__('Title')),
]),
]);
}
But that won't workt because this function expects an argument (Infolist $infolist)

[jncalderon]

@alboxe there is my infolist, inside on my model

public function toInfolist(): Infolists\Infolist
    {
        return Infolists\Infolist::make()
            ->record($this)
            ->schema([
                Infolists\Components\Grid::make()
                    ->schema([
                        Infolists\Components\TextEntry::make('assignee.name')
                            ->translateLabel(),
                        Infolists\Components\IconEntry::make('is_done')
                            ->translateLabel()
                            ->boolean()
                    ]),
                Infolists\Components\Grid::make()
                    ->schema([
                        Infolists\Components\TextEntry::make('name')
                            ->label(__('Customer')),
                        Infolists\Components\TextEntry::make('address')
                            ->translateLabel(),
                    ]),
                Infolists\Components\Grid::make()
                    ->schema([
                        Infolists\Components\TextEntry::make('appointmentType.name')
                            ->color($this->appointmentType->color === null ? 'primary' : Color::hex($this->appointmentType->color))
                            ->translateLabel(),
                        Infolists\Components\TextEntry::make('appointmentPriority.name')
                            ->color($this->appointmentPriority->color === null ? 'primary' : Color::hex($this->appointmentPriority->color))
                            ->translateLabel(),
                    ]),
                Infolists\Components\Grid::make()
                    ->schema([
                        Infolists\Components\TextEntry::make('starts_at')
                            ->dateTime()
                            ->translateLabel(),
                        Infolists\Components\TextEntry::make('ends_at')
                            ->dateTime()
                            ->translateLabel(),
                    ]),
                Infolists\Components\TextEntry::make('note')
                    ->visible(fn ($state) => $state !== null)
                    ->markdown()
                    ->translateLabel(),
                Infolists\Components\Grid::make()
                    ->schema([
                        Infolists\Components\TextEntry::make('user.name')
                            ->label(__('Created by')),
                        Infolists\Components\TextEntry::make('created_at')
                            ->badge()
                            ->translateLabel()
                            ->since()
                            ->dateTimeTooltip(),
                    ]),
            ]);
    }

[alboxe]

Muito obrigado! Finally I got it working. Thank you for the quick reactions and for sharing your code. Even my original problem, single and double apostrophes in the data, has been solved with tippy.js. I can see that I still have to study some Filament basics... Op do 15 aug 2024 om 17:39 schreef jncalderon ***@***.***>:

…

@alboxe <https://github.com/alboxe> there is my infolist, inside on my model public function toInfolist(): Infolists\Infolist { return Infolists\Infolist::make() ->record($this) ->schema([ Infolists\Components\Grid::make() ->schema([ Infolists\Components\TextEntry::make('assignee.name') ->translateLabel(), Infolists\Components\IconEntry::make('is_done') ->translateLabel() ->boolean() ]), Infolists\Components\Grid::make() ->schema([ Infolists\Components\TextEntry::make('name') ->label(__('Customer')), Infolists\Components\TextEntry::make('address') ->translateLabel(), ]), Infolists\Components\Grid::make() ->schema([ Infolists\Components\TextEntry::make('appointmentType.name') ->color($this->appointmentType->color === null ? 'primary' : Color::hex($this->appointmentType->color)) ->translateLabel(), Infolists\Components\TextEntry::make('appointmentPriority.name') ->color($this->appointmentPriority->color === null ? 'primary' : Color::hex($this->appointmentPriority->color)) ->translateLabel(), ]), Infolists\Components\Grid::make() ->schema([ Infolists\Components\TextEntry::make('starts_at') ->dateTime() ->translateLabel(), Infolists\Components\TextEntry::make('ends_at') ->dateTime() ->translateLabel(), ]), Infolists\Components\TextEntry::make('note') ->visible(fn ($state) => $state !== null) ->markdown() ->translateLabel(), Infolists\Components\Grid::make() ->schema([ Infolists\Components\TextEntry::make('user.name') ->label(__('Created by')), Infolists\Components\TextEntry::make('created_at') ->badge() ->translateLabel() ->since() ->dateTimeTooltip(), ]), ]); } — Reply to this email directly, view it on GitHub <#195 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANQM62U6I22POLXIJE2YBWLZRTDR3AVCNFSM6AAAAABJ7SVDUSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMZUHEZTOOA> . You are receiving this because you were mentioned.Message ID: ***@***.*** .com>

[yazidr1]

its a little late, if you just need something simple, simply use escape in js.
use double quote, not single.
el.setAttribute("x-data", "{ tooltip: \"" + event.extendedProps?.dosen + " - " + event.extendedProps?.ruangan +"\"}");