marshmallow / nova-tooltip-field
This Laravel Nova field enables you to make use of the default Nova Tooltip component.
Installs: 26
Dependents: 0
Suggesters: 0
Security: 0
Stars: 2
Watchers: 2
Forks: 0
Open Issues: 0
Language:Vue
Requires
- php: ^8.1
- illuminate/support: ^10.0|^11.0|^12.0
Requires (Dev)
- laravel/nova: ^5.0
- laravel/nova-devtool: ^1.5
This package is auto-updated.
Last update: 2025-02-08 10:48:46 UTC
README
Laravel Nova Totals footer
This Laravel Nova field enables you to make use of the default Nova Tooltip component.
Screenshot
Requirements
php: ^8.1
laravel/nova: ^5.0
Installation
Install via composer:
composer require marshmallow/nova-tooltip-field
Usage
The usage is extreamly simple. You just call the field as you whould any other Nova Field. The example below is the same as we have used to create the screenshot on top of this page.
NovaTooltipField::make('Tooltip Demo') ->resolveUsing(function ($value) { return '<strong>Demo</strong><br/>How awesome is this?'; }) ->tooltip('Hover me!') ->tooltipIcon('information-circle') ->tooltipIconType('outline');
Options
All the options that are available on the Nova Tooltip component can be set via the methods listed below.
Options with a little bit more context
tooltipIcon
The tooltipIcon
method will accept a string, being an icon name, or it will accept a callable where you can "calculate" the icon you want to use. E.g.
->tooltipIcon(function () { return $this->field_01 > 0 ? 'arrow-up' : 'arrow-down'; })
tooltipTriggerTextStyling and tooltipTriggerIconStyling
The tooltipTriggerTextStyling
and tooltipTriggerIconStyling
methods will accept a string, being a class name, or it will accept a callable where you can "calculate" the class you want to use. The second parameter of this method tells the tooltip if we need to use this value as a class or as an inline styling. By default this method will use your value as classes, set the as_inline_style
to true and it will use inline styling.
/** Set the text color for the tooltip trigger text */ ->tooltipTriggerTextStyling(function () { return 'color:#ff133b;'; }, asInlineStyle: true) /** Set the text color for the tooltip trigger icon */ ->tooltipTriggerIconStyling(function () { return 'text-red-500'; }, asInlineStyle: false)
Licence
The MIT License (MIT). Please see License File for more information.
💖 Sponsorships
If you are reliant on this package in your production applications, consider sponsoring us! It is the best way to help us keep doing what we love to do: making great open source software.
Contributing
Feel free to suggest changes, ask for new features or fix bugs yourself. We're sure there are still a lot of improvements that could be made, and we would be very happy to merge useful pull requests.
Special thanks to
Made with ❤️ for open source
At Marshmallow we use a lot of open source software as part of our daily work. So when we have an opportunity to give something back, we're super excited!
We hope you will enjoy this small contribution from us and would love to hear from you if you find it useful in your projects. Follow us on Twitter for more updates!