
Add tooltip to table header column macro
- Published: 25 Apr 2024 Updated: 04 May 2024

In any service providers boot method add:
1TextColumn::macro('abbr', function (?string $abbr = null, bool $asTooltip = false) {2 $label = $this->getLabel();3 $abbr = $abbr ?? $label;4 $classes = $this->isSortable() ? 'cursor-pointer' : 'cursor-help';5 6 $attributes = $asTooltip ? 'x-tooltip.raw="'.$abbr.'" title=""' : 'title="'.$abbr.'"';7 8 return $this->label(new HtmlString("<abbr class=\"$classes\" $attributes>$label</abbr>"));9});
1TextColumn::make('amount')2 ->label('TA BT')3 ->abbr('the amount of money that was transferred before tax', asTooltip: true)
You may want to add 'cursor-help' to your safelist
in your tailwind.config.js
1safelist: [2 'cursor-help',3],

Related Tricks:
make all Field or any components translatable
how to use a resource with multiple models
Add a Quick links to activate table filter on FilamentPHP table
how to use an action as a headerAction or as a table row action without code duplication