Laravel Nova field to display Tippy tooltip on the resource index.

On detail will display just like Laravel Nova Textarea.

composer require monaye/nova-tippy-field

use Monaye\NovaTippyField\Tippy;

public function fields(Request $request)
{
    return [
        Tippy::make('Body')
            ->text(Str::limit($this->body, 40))
            ->tipContent($this->body)
    ];
}

Nova Tippy Field comes with various options that you can use to customise how it displayed and availability to pass all the props available to the underlying Tippy instance as well.

You can pass excerpt text or any text you want to display to user as hoverable element. There are options to display icon as well see icon or iconUrl for detail.

Tippy::make('Body')
    ->text(Str::limit($this->body, 40))
    ->tipContent($this->body)

Pass the text you'd like to display inside the Tippy tooltip. If tooltip content is empty, it will not display the tooltip at all.

Tippy::make('Body')
    ->text(Str::limit($this->body, 40)),
    ->tipContent($this->body)

You can directly pass the path of your local SVG file or URL of the icon or both. Icon position also can be set.

Tippy::make('Body')
    ->text(Str::limit($this->body, 40))
    ->tipContent($this->body)
    ->iconUrl(asset('assets/icons/blue-info.svg'))
    ->iconPath(resource_path('icons/eye.svg'))
    ->iconPosition('right')

placement of the tooltip can be placed in different location. All the available placement position can be found at Tippy Placement Options

Tippy::make('Body')
    ->iconUrl(asset('assets/icons/blue-info.svg'))
    ->tipContent($this->body)
    ->placement('bottom')

You can pass any props directly that available in the Tippy JS Props. Please note that, some of the props might not work correctly with nova.

Tippy::make('Body')
    ->text(Str::limit($this->body, 40))
    ->tipContent($this->body)
    ->tippyOptions(['arrow' => false, 'placement' => 'bottom'])

Just like the Laravel Nova TextArea field, on detail screen, by default Nova Tippy Field will hide the content and only show when you click on Show Content. You can always show the content in the detail screen.

Tippy::make('Body')
    ->text(Str::limit($this->body, 40))
    ->tipContent($this->body)
    ->shouldShow()

Hope you find it useful. Feel free to reach out with feedback.

Follow me on twitter: @winmonaye