logo light

Add tooltip to table header column macro

Image Description
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