List view: How to make row text smaller, and have hover over row showing values in 'title' style popup

[gvanto]

Any help much appreciated!

[karandatwani92]

HI @gvanto

For Tooltip:
Here is an article on adding a tooltip on columns/list operation as it's example:
https://backpackforlaravel.com/articles/tutorials/how-to-make-custom-javascript-work-with-backpack-s-list-operation

To make values shorter:
We can add text-truncate class using wrapper:

CRUD::column('content')->wrapper([
'element' => 'span',
  'class' => 'd-inline-block text-truncate',
  'style' => "max-width: 100px;",
  'data-bs-toggle' => "tooltip",
  'data-bs-placement'=> "top",
]);

I'm sure you want to do it to many columns. To avoid placing the code in every column, we can Add new methods to the CrudColumn class and use it for any column.

//app/Providers/AppServiceProvider.php

public function register()
{
/*...*/
if (! CrudColumn::hasMacro('customThing')) {
  CrudColumn::macro('customThing', function ($firstParamExample = [], $secondParamExample = null) {
    /** @var CrudColumn $this */
    $this->wrapper([
      'element' => 'span',
      'class' => 'd-inline-block text-truncate',
      'style' => "max-width: 100px;",
      'data-bs-toggle' => "tooltip",
      'data-bs-placement'=> "top",
    ]);
  return $this;
  });
}

CRUD::column('content')->customThing();

But there will be a problem, you want to put column value as a tooltip title, which I don't know if we can pass from CRUD.

Final thought:

If I was doing that. I would create a custom column, where I'm free to get the value and set HTML/ CSS as I want.

You can quickly create a column using the following command:
php artisan backpack:column text_wrap_column --from=text

Note: This will also require steps to make custom JavaScript work with Backpack's List Operation.

[gvanto]

Brilliant thanks @karandatwani92 for in-depth answer ... handy stuff to know about the JS, very powerful, love it!

I actually managed to do this with custom column (although I noticed that my final column specified in setupListOperation (updated_at) is not being added to the columns (maybe due to space issue?).

What I would like to do now is override the action columns - just use the icons (dont need the 'Delete' and 'Preview' words next to them) ... hopefully this is possible...

[karandatwani92]

Yes, just place your overridden action button here:
resources/views/vendor/backpack/crud/buttons/delete.blade.php

[gvanto]

Yes, just place your overridden action button here: resources/views/vendor/backpack/crud/buttons/delete.blade.php

Works like a dream, thanks @karandatwani92 !

To get the 'tooltip' working (not a real tooltip, just title) I am using this in my custom column which works OK:

@php
    /** @var $column */
    /** @var $entry */
    $value = '';
    if ($column['name'] === 'user') {
        $value = $entry->user->name;
    } elseif ($column['name'] === 'updated_at') {
        $value = \Carbon\Carbon::parse($entry->updated_at)->format('d/m/Y');
    } else {
        $value = $entry->{$column['name']};
    }
@endphp
<span
    class="d-inline-block text-truncate" style="font-size: small;max-width: 400px;"
    title="{{ $value }}"
>
    {{ $value }}
</span>