Tooltip for suffixIcon possible?

Currently I'm creating an TextInput field with a suffix icon. Is it possible to give this suffix icon a tooltip?

TextInput::make('key')
    ->label('Key')
    ->suffixIcon('heroicon-o-clipboard-document')
    ->suffixIconColor(FilamentColor::getColors()['danger'])
    ...

TextInput::make('key')
    ->label('Key')
    ->suffixIcon('heroicon-o-clipboard-document')
    ->suffixIconColor(FilamentColor::getColors()['danger'])
    ...

11 Replies

Patrick Boivin•2mo ago

Just curious, what's the use for this tooltip? Is this an action or just some extra information on a static icon? Not pretty but I think this should work:

    ->suffix(new HtmlString(
        Blade::render('<span title="My Tooltip"><x-heroicon-o-newspaper class="w-4" /></span>')
    ))

    ->suffix(new HtmlString(
        Blade::render('<span title="My Tooltip"><x-heroicon-o-newspaper class="w-4" /></span>')
    ))

TK•2mo ago

@pboivin its a tooltip for an action, which is actually my second question. Let me give you some more information. I have a TextInput field with an icon on the right side indicating the contents of this input is copyable. When the user presses the icon, I want to copy the value of that input to the clipboard (still don't know how to do this...). My question was, how can I show a tooltip when hovering over that copy icon on the right side?

Vp•2mo ago

Not sure about "tooltip" but you can check copy-action here https://filamentglow.com/trick/copied-to-clipboard-on-suffix-action-2768391d

FilamentPHP Glow

Custom copy action, click the icon to copy the content

TK•2mo ago

@Vp thanks, I'll check it out @Vp It works, but the tooltip for saying "copied to clipboard" is shown on the top, instead of above the icon

Vp•2mo ago

Yes, that one I don't know how to change for now And for tooltip you can use ->tooltip() inside action

TK•2mo ago

@Vp alternative approach would be:

->suffixAction(
    Action::make('copy')
          ->icon('heroicon-o-clipboard-document-check')
          ->color(FilamentColor::getColors()['danger'])
          ->action(function ($livewire, $state) {
              $livewire->js(
                  'window.navigator.clipboard.writeText("' . $state . '"); ' .
                  'new FilamentNotification()
                      .title("Copied to clipboard")
                      .info()
                      .icon("heroicon-o-document-text")
                      .send();
                  '
              );
          })
)

->suffixAction(
    Action::make('copy')
          ->icon('heroicon-o-clipboard-document-check')
          ->color(FilamentColor::getColors()['danger'])
          ->action(function ($livewire, $state) {
              $livewire->js(
                  'window.navigator.clipboard.writeText("' . $state . '"); ' .
                  'new FilamentNotification()
                      .title("Copied to clipboard")
                      .info()
                      .icon("heroicon-o-document-text")
                      .send();
                  '
              );
          })
)

@Vp do you maybe know how to make my code above macroable? I would like to reuse this on different pages and resources Like so:

->suffixAction(
    Action::make('copy')
          ->myCopyable()  // <--- my macro 
)

->suffixAction(
    Action::make('copy')
          ->myCopyable()  // <--- my macro 
)

Vp•2mo ago

https://laravel.com/docs/11.x/http-client#macros

Action::macro('myCopyable', function ($something) {
    return $this->icon('hero...')
       ->color('danger')
       ->action(...);
});

Action::macro('myCopyable', function ($something) {
    return $this->icon('hero...')
       ->color('danger')
       ->action(...);
});

sth like this, but not tested

TK•2mo ago

Ill check it out if I can use Laravel's Macroable on Filament stuff Action extends Component, and Component is Macroable, so lets see

Vp•2mo ago

Just do this way, use Filament\Forms\Components\Actions\Action; and it should work. I've done using like this for "table filter" and it's work perfect laravel link is for where to define your macro. and you call this macro like this, maybe need to passed $state in ->myCopyable($state)

TK•2mo ago

Yeah, i got it.. Give me a sec, and ill show you the mixin im creating and testing @Vp here you go:

<?php

declare(strict_types=1);

namespace App\Mixins;

use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\TextInput;
use Filament\Support\Colors\Color;

/**
 * @mixin TextInput
 */
class TextInputMixin
{
    public function copyActionSuffix()
    {
        /**
         * Create a copyable action.
         */
        return function (
            string $noficicationText,
            string $notificationType = 'info',
            string $notificationIcon = 'heroicon-o-document-text',
            string $fieldIcon = 'heroicon-o-clipboard-document-check',
            string $fieldIconColor = '#EC2427'
        ) {
            $this->suffixAction(
                Action::make('copy')
                      ->icon($fieldIcon)
                      ->color(Color::hex($fieldIconColor))
                      ->action(
                          function ($livewire, $state) use (
                              $noficicationText,
                              $notificationType,
                              $notificationIcon
                          ) {
                              $livewire->js(
                                  "window.navigator.clipboard.writeText('" . $state . "'); " .
                                  "new FilamentNotification()
                                      .title('" . $noficicationText . "')
                                      ." . $notificationType . "()
                                      .icon('" . $notificationIcon . "')
                                      .send();
                                  "
                              );
                          }
                      )
            );

            return $this;
        };
    }
}

<?php

declare(strict_types=1);

namespace App\Mixins;

use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\TextInput;
use Filament\Support\Colors\Color;

/**
 * @mixin TextInput
 */
class TextInputMixin
{
    public function copyActionSuffix()
    {
        /**
         * Create a copyable action.
         */
        return function (
            string $noficicationText,
            string $notificationType = 'info',
            string $notificationIcon = 'heroicon-o-document-text',
            string $fieldIcon = 'heroicon-o-clipboard-document-check',
            string $fieldIconColor = '#EC2427'
        ) {
            $this->suffixAction(
                Action::make('copy')
                      ->icon($fieldIcon)
                      ->color(Color::hex($fieldIconColor))
                      ->action(
                          function ($livewire, $state) use (
                              $noficicationText,
                              $notificationType,
                              $notificationIcon
                          ) {
                              $livewire->js(
                                  "window.navigator.clipboard.writeText('" . $state . "'); " .
                                  "new FilamentNotification()
                                      .title('" . $noficicationText . "')
                                      ." . $notificationType . "()
                                      .icon('" . $notificationIcon . "')
                                      .send();
                                  "
                              );
                          }
                      )
            );

            return $this;
        };
    }
}

Vp•2mo ago

Super 👍

Gaming

Programming

Tooltip for suffixIcon possible?