comodolab/nova-help

A custom help/title field for Laravel Nova

Warning This library is not maintained anymore but feel free to fork it. For info do not exitate contacting me.

Laravel Nova Help Field

A custom Nova fields which allows to show custom help messages within form, detail and index screens.

Changelog

See changelog here.

Install

Run this command in your nova project:

composer require comodolab/nova-help

Then you can use the field in your resource as follow:

use Comodolab\Nova\Fields\Help\Help;

public function fields(Request $request)
{
    return [
        Help::make('Help title', 'Help message!'),
    ];
}

Options

Nova Help Field has many options as follow:

Default templates

Help::make('title', 'message'); // Default help message
Help::success('title', 'message');
Help::info('title', 'message');
Help::warning('title', 'message');
Help::danger('title', 'message');

// There's also a special template for headings
Help::header('title', 'subtitle');

// If you prefer you can call the non static type method
Help::make('title', 'message')->type('warning'); 

Help templates:

Headings template:

Both title and message are optional

Help::make('Only title');
Help::make()->message('Only message');

Messages can also be callable

Help::make()->message(function () {
    return "{$this->name} is awesome!";
});

Icons

You can pick one of the default SVG icons (http://www.zondicons.com/) provided by Steve Schoger.

Help::make('Title')->icon('help'); // the default one
Help::make('Title')->icon('info');
Help::make('Title')->icon('warning');
Help::make('Title')->icon('danger');
// Load a custom one
Help::make('Love you')
    ->message('Yes, I love you!')
    ->icon('<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m10 3.22-.61-.6a5.5 5.5 0 0 0 -7.78 7.77l8.39 8.39 8.39-8.4a5.5 5.5 0 0 0 -7.78-7.77z"/></svg>');
// or show no icon at all
Help::make('Sad')->withoutIcon();

Render html messages

Help::make('Title', 'Message with <a href="#">link</a>')->displayAsHtml();

From v0.2 the displayAsHtml() method applies also to the field name (unless shown as column header on index).

Full width on details screen

// Remove annoing padding in detail screen, also the default behaviour for the heading template 
Help::make('Negative margin')->showFullWidthOnDetail();

With side label

// Show a side label instead of the title on the top
Help::make('Look I\'m on the side')
    ->message('I\'m not...')
    ->withSideLabel();

Collapsible help fields

Help fields can be made collapsible using the fluent method collapsible(). Collapsible help fields are collapsed by default and toggle their state clicking on their title. Also, keep in mind that collapsible fields must define both a title and message and cannot be used with side labels.

// Collapsible field
Help::info('Click here to toggle', 'Lorem ipsum dolor sit amet...')
    ->collapsible();

Show help messages on index

/**
 * By default help messages aren't shown on index,
 * when enabled they are shown as an hoverable 
 * icon showing a plain (no html) tooltip.
 */
Help::make('Column title')
    ->message('Message with <a href="#">link</a>') // The link code will be stripped out on index
    ->alsoOnIndex();
    
// Field icons can be shown conditionally on index
Help::make()->message(function () {
    return $this->name?"{$this->name} is awesome!":null;
})->onlyOnIndex();

nova-help's Issues

Tooltip is hidden behind footer

For the final row in the index table, the message tooltip pops open behind the table footer.

Doesn't work with a JSON field?

Thanks for this component - but I have a small issue: I have a prices column which is set to JSON in the database and cast as an Object on my resource.

If I make this field:

        Help::make()->message(function () {
            return $this->prices->gbp->comment;
        }),

I get an error 'trying to get property 'gbp' of none object'

However the help field shows as expected and dd($this->prices) or further clearly shows it as an object and I'm using it fine in this way on other nova fields.

I'm afraid I don't know how to debug it further sorry

Thanks

Make help title/messages collapsable

Hello,

I was wondering if it is possible to make the messages collapsable. For example the title would always be displayed but when it is clicked it shows/ hides the message section. This would be great for providing unintrusive assistance to the user.

It could work like Bootstraps collapse does - https://getbootstrap.com/docs/4.3/components/collapse/#example

Thanks for your time.

collapsible() not working correctly with displayAsHtml()

If you use collapsible() and displayAsHtml() together, the dropdown arrow is missing, and the cursor is an arrow rather than a pointer

Laravel 8 Support

Does not currently support Laravel 8 due to illuminate/support dependency.

Compatibility Nova 4 ?

Is it compatible with nova 4 ?
I have an issue with jsonSerialize() :(

If the first field is a Help field on view there is a blank space

I am not sure if this issue is fixable within this repo but I think it's worth flagging anyway as an issue.

Laravel 7 Support

Is there any plans on adding laravel 7 support any time soon?

Display as html only works on message but not title

Laravel 7 support?

Is the author planning to update the package to support Laravel 7 soon?

not work

Declaration of Comodolab\Nova\Fields\Help\Help::jsonSerialize() must be compatible with Laravel\Nova\Fields\Field::jsonSerialize(): array

Replace the use of is_callable

nova-help/src/Help.php

Line 135 in f02c6c5

if (is_callable($message)) {

Improve help field in index view

• Center the icon
• Show the icon only when message is present

nova-help/resources/js/components/IndexField.vue

Line 3 in 1046a46

<div class="pr-4 comodolab-help-field-icon-container inline-block"