Tricks

Create a tooltip macro

Nov 25, 2022
Hörmann Bernhard
Form builder

Ever wondered, how to add a tooltip for longer help texts for form fields? This trick will show you how.

In your AppServiceProvider::boot method just add the following macro:

Field::macro("tooltip", function(string $tooltip) {
    return $this->hintAction(
        Action::make('help')
            ->icon('heroicon-o-question-mark-circle')
            ->extraAttributes(["class" => "text-gray-500"])
            ->label("")
            ->tooltip($tooltip)
    );
});

Now you can use it like so:

Forms\Components\Textarea::make('text')
    ->tooltip("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna ")

which will be displayed like this:

Other tricks

How to use Spatie Tags with types

Form builder

by Al Elliott, 2 years ago

7 4350

Quickly fill in the form field (form hints, random passwords, clear input, format values)

Admin panel Form builder

by studiowizjo, 3 years ago

26 6321

Twitter like user popover

Admin panel Integration

by Arthur Minasyan, 2 years ago

1 2274
avatar
tvkvds

Easy to use for consistent tooltips, especially when adding a closure as param type.

Bit hacky, but by adding the HasHint Trait to infolist fields, and adding $hintaction to the infolist field blade, the same tooltip can be used on show pages.

avatar
Ayoub

i can't use this macro , it tells me that $this is refreing to the Appserviceprovider class and not the Field class , anyone have a solution ?

avatar
Leo Flapper

Are you using Filament V3?

For Filament V3 use this example inside the AppServiceProvider::boot

use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\Field;
 
Field::macro("tooltip", function(string $tooltip) {
        return $this->hintAction(
                function() use($tooltip) {
                        return Action::make('help')
                                ->icon('heroicon-o-question-mark-circle')
                                ->extraAttributes(["class" => "text-gray-500"])
                                ->label("")
                                ->tooltip($tooltip);
 
                }
        );
});
Sign in to comment →