Add tooltip to table header column macro

By: dissto

Published: 25 Apr 2024 Updated: 04 May 2024

Add tooltip to table header column macro

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],

Back to Tricks

Related Tricks:

Make components globally translatable

Translating components can often be a repetitive task, Fortunately, there's a neat trick to automate this process, making your components instantly translatable.

Reuse action in both Table and Header

how to use an action as a headerAction or as a table row action without code duplication

Implementing Row-Level Security in Filament Tables with applyRowAccessPolicy

Learn how to implement row-level security in Filament tables using the applyRowAccessPolicy macro that filters query results based on user permissions through Laravel's policy system.

Globally Translate all Components

make all Field or any components translatable

Trigger an action when updating a column's state

Using an editable column like SelectColumn or ToggleColumn, you can conditionally trigger a modal form when a certain option is selected.