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

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.

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.

Make Filament table Headers sticky using CSS

Sticky Table Row Actions

how to make actions sticky in tables when you have a lot of columns

Add tooltip to table header column macro