F
Filament•7mo ago
TK

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
Patrick Boivin•7mo 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
TKOP•7mo 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
Vp•7mo 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
TKOP•7mo 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
Vp•7mo ago
Yes, that one I don't know how to change for now And for tooltip you can use ->tooltip() inside action
TK
TKOP•7mo 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
Vp•7mo 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
TKOP•7mo 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
Vp•7mo 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
TKOP•7mo 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
Vp•7mo ago
Super 👍
Want results from more Discord servers?
Add your server