tooltip
Hello
I'm trying to render a tooltip in ideally html.
This is in Table Builder version 2.
I have installed @ryangjchandler/alpine-tooltip.
I need to at least format the tooltip with new lines.
I see where the tooltip div is rendered with x-tooltip.raw=.
Is there any way to swap x-tooltip.raw= with x-tooltip.html in the tooltip() method?
9 Replies
I'm not sure but maybe you could add the attributes manually instead of using
->tooltip():
Hi @pboivin ,
Thanks for that.
The x-tooltip.html doesn't override the tooltip() default: x-tooltip.raw.
When I add this as x-tooltip.html in the extraAttributes(), the tooltip displays, but no content.
If I change it to x-tooltip.raw it works. Content displays, but no formatting.
I'm displaying an array from a JSON file so I need at least new lines to separate the fields for easier reading.
Do I need to change something in Filament?
He said „instead of“ not both at the same time. Can you show the version that is not working
Hi @Dennis Koch ,
Okay. I removed the tooltip() from the field and added the x-tooltip.html as shown.
Here's the TextColumn:
TextColumn::make('loc_id')->label('Loc ID')
->extraAttributes([
'class' => 'p-px text-sm',
'x-data' => '{}',
'x-tooltip.html' => new HtmlString('<h1>Hello World</h1>'),
])
->default('N/A')
// ->tooltip(function (TextColumn $column): ?string {
// $state_locID = $column->getState(); // $additionalInfo = $this->getAdditionalInfo($state_locID); // Get additional info based on "loc_id" // return $additionalInfo; // }) ->sortable() ->searchable(), This produces a tooltip, but no content in it. Change x-tooltip.html to x-tooltip.raw and the content shows.
// $state_locID = $column->getState(); // $additionalInfo = $this->getAdditionalInfo($state_locID); // Get additional info based on "loc_id" // return $additionalInfo; // }) ->sortable() ->searchable(), This produces a tooltip, but no content in it. Change x-tooltip.html to x-tooltip.raw and the content shows.
What if you just use the ->tooltip() method and return a HTML string there.?
Hi @awcodes ,
That was the first thing I tried. It will only display as plain text, i.e.: x-tooltip.raw.
That's what led me on this interesting quest.
->tooltip() default (x-tooltip.raw) is overriding everything.
I found another discussion about quotes are encoded in tooltip
where Dan mentioned: the fix needs to be in button.blade.php, this line should be
x-tooltip="@js($tooltip)"
https://discord.com/channels/883083792112300104/1090010932748492800/1090224724510003201
I don't see that in my version of Filament.
Any suggestions on how to hook or filter ->tooltip() to do html ie: x-tooltip.htm ?
I can supply the getAdditionalInfo() method and the output to display in the tooltip.
I really don't want to have to go with a modal approach. Tooltip is a simpler UI experience for these guys.
Thanks for the interest and help so far!Dosn't work.
for whoever needed this, below method works for me. it is not working when doing x-tooltip.html or x-tooltip.raw alone. But somehow defined an empty x-tooltip.html will make the raw works with html.
TextColumn::make('name')
->html()
->extraAttributes(fn (Model $record): Array => [ 'x-tooltip.html' => new HtmlString(), 'x-tooltip.raw' => new HtmlString(implode('<br>- ', ($record->whatever ?? ['-']))), ]),
->extraAttributes(fn (Model $record): Array => [ 'x-tooltip.html' => new HtmlString(), 'x-tooltip.raw' => new HtmlString(implode('<br>- ', ($record->whatever ?? ['-']))), ]),
Probably this is obvious to most people, but it wasn't to me 🙂 I have found that the order is important, x-tooltip.html must be before x-tooltip.raw in your array.
This works:
->extraAttributes(fn ($record): array => [
'x-tooltip.html' => new HtmlString(),
'x-tooltip.raw' => new HtmlString('Test<br />Test'),
])
This doesn't:
->extraAttributes(fn ($record): array => [
'x-tooltip.raw' => new HtmlString('Test<br />Test'),
'x-tooltip.html' => new HtmlString(),
]),