Filament•7mo ago

Long email address in tooltip breaking at the @

Hi All, have a column of email addresses that can get quite long so I stick a limit and add a tooltip for those cells where the limit is breached. I have a particular address that overflows the tooltip exactly at the @ symbol. If I change the @ to a - in the database the tooltip works fine

Solution:

a workaround ```php ->extraAttributes(fn (YorModel $record): array => [ 'x-tooltip' => "{content: '<div class="break-words">{$record->email}</div>', allowHTML:true}"...

Jump to solution

10 Replies

Solution

LeandroFerreira•7mo ago

a workaround

->extraAttributes(fn (YorModel $record): array => [
    'x-tooltip' => "{content: '<div class=\"break-words\">{$record->email}</div>', allowHTML:true}"
])

->extraAttributes(fn (YorModel $record): array => [
    'x-tooltip' => "{content: '<div class=\"break-words\">{$record->email}</div>', allowHTML:true}"
])

TheRealTeeHillOP•7mo ago

👏 nice one work perfectly, do you know why the workaround is needed pls?

LeandroFerreira•7mo ago

tooltip method doesn't support html

TheRealTeeHillOP•7mo ago

[email protected] this is the offending string, what about it is breaking pls? maybe I should parse the email before storing to check if it is a wacky string like the one I posted 🙂

LeandroFerreira•7mo ago

yes, you should check the email before storing

TheRealTeeHillOP•7mo ago

in this case it will be ok with the workaround as the email address will never be used by the system, its data from MS Exchange Online Protection quarantined emails, but good to know cheers ❤️

Hugo•6mo ago

Hi, is this solution still working? I'm at the moment trying to use it to list data in a tooltip and it isn't showing any tooltip.

TheRealTeeHillOP•6mo ago

It’s still working fine in my implementation 🫡

bwurtz999•3mo ago

Hello - I'm trying the following code and it is not working:

->extraAttributes(function ($state) {
    $selectedItem = TeamProfileSelectedItem::find($state['id']);

    if ($selectedItem->extras()->exists()) {
        $text = '';
        foreach ($selectedItem->extras as $extra) {
            $text .= $extra->qty . '--' . $extra->name;
        }

        return [
            'x-tooltip' => "{content: '<div class=\"break-words\">{$text}</div>', allowHTML:true}"
        ];
    }
    return [];
})

->extraAttributes(function ($state) {
    $selectedItem = TeamProfileSelectedItem::find($state['id']);

    if ($selectedItem->extras()->exists()) {
        $text = '';
        foreach ($selectedItem->extras as $extra) {
            $text .= $extra->qty . '--' . $extra->name;
        }

        return [
            'x-tooltip' => "{content: '<div class=\"break-words\">{$text}</div>', allowHTML:true}"
        ];
    }
    return [];
})

I've also tried replacing $text with static text Hello world but I still get an error. I only get a small black box as the tooltip with no text at all. What version of Filament are you using where this works? Do I need to install something in addition to Filament?

bwurtz999•3mo ago

Asking again to see if anyone has any ideas - any idea how to use HTML in the tooltip? And why it worked previously but not now?

Gaming

Programming

Long email address in tooltip breaking at the @