PHPackages                             marshmallow/nova-tooltip-field - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility &amp; Helpers](/categories/utility)
4. /
5. marshmallow/nova-tooltip-field

ActiveLibrary[Utility &amp; Helpers](/categories/utility)

marshmallow/nova-tooltip-field
==============================

This Laravel Nova field enables you to make use of the default Nova Tooltip component.

1.3.0(3mo ago)322.3k↓32.6%2MITVuePHP ^8.1

Since Jan 31Pushed 3w ago2 watchersCompare

[ Source](https://github.com/marshmallow-packages/nova-tooltip-field)[ Packagist](https://packagist.org/packages/marshmallow/nova-tooltip-field)[ RSS](/packages/marshmallow-nova-tooltip-field/feed)WikiDiscussions main Synced today

READMEChangelog (4)Dependencies (6)Versions (6)Used By (0)

[![Version](https://camo.githubusercontent.com/559b2f69e77bb74d24167324bf6de7becf922e46d678a0bdbd5961fe4228b47a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d617273686d616c6c6f772f6e6f76612d746f6f6c7469702d6669656c64)](https://packagist.org/packages/marshmallow/nova-tooltip-field)[![Downloads](https://camo.githubusercontent.com/79f4dc21f8d90894450b3d4b1e5709c63281b1e3629afe49ca65ad08e5dad030/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d617273686d616c6c6f772f6e6f76612d746f6f6c7469702d6669656c64)](https://packagist.org/packages/marshmallow/nova-tooltip-field)[![Issues](https://camo.githubusercontent.com/f9c748d722b436cdb9dee22c9962a42b8e455ef7abb89c8d336730904a35a417/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f6d617273686d616c6c6f772d7061636b616765732f6e6f76612d746f6f6c7469702d6669656c64)](https://github.com/marshmallow-packages/nova-tooltip-field/issues)[![Licence](https://camo.githubusercontent.com/ebe7b15f6a193168b5018268e83d4f59e93ac2c1ea21aa9aa79b441fcb54fe1d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d617273686d616c6c6f772d7061636b616765732f6e6f76612d746f6f6c7469702d6669656c64)](https://github.com/marshmallow-packages/nova-tooltip-field/blob/main/LICENCE)

Laravel Nova Tooltip Field
==========================

[](#laravel-nova-tooltip-field)

This [Laravel Nova](https://nova.laravel.com) field enables you to make use of the default Nova Tooltip component.

Screenshot
----------

[](#screenshot)

[![](./resources/screenshot/nova-tooltip-field-screenshot.png)](./resources/screenshot/nova-tooltip-field-screenshot.png)

Requirements
------------

[](#requirements)

- `php: ^8.1`
- `laravel/nova: ^5.0`

Installation
------------

[](#installation)

Install via composer:

```
composer require marshmallow/nova-tooltip-field
```

Usage
-----

[](#usage)

The usage is extremely simple. You just call the field as you would any other Nova field. The example below is the same as we have used to create the screenshot on top of this page.

```
use Marshmallow\NovaTooltipField\NovaTooltipField;

NovaTooltipField::make('Tooltip Demo')
    ->resolveUsing(function ($value) {
        return 'DemoHow awesome is this?';
    })
    ->tooltip('Hover me!')
    ->tooltipIcon('information-circle')
    ->tooltipIconType('outline');
```

### Options

[](#options)

All the options that are available on the Nova Tooltip component can be set via the methods listed below.

MethodDescription`distance(0)`Sets the distance between the tooltip and the target element.`skidding(20)`Adjusts the offset of the tooltip along the target element.`boundary('window')`Defines the boundary within which the tooltip should be constrained.`placement('left')`Specifies the position of the tooltip relative to the target element. E.g. `auto`, `auto-start`, `auto-end`, `top`, `top-start`, `top-end`, `right`, `right-start`, `right-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start` or `left-end``triggers(['hover'])`Sets the events that trigger the tooltip. E.g. `click`, `hover`, `focus` or `touch``autoHide(true)`Determines whether the tooltip should automatically hide after showing.`tooltip('Hover me!')`Sets the text content of the tooltip.`tooltipIcon('information-circle')`Specifies the icon to be displayed in the tooltip. This can be a string or a callble.`tooltipIconType('outline')`Defines the style of the tooltip icon. E.g. `solid`, `outline`, `mini` or `micro``preventOverflow(false)`Prevents the tooltip from overflowing its boundary.`theme('plain')`Sets the theme of the tooltip. E.g. `nova`, `tooltip`, `dropdown`, `menu` or `plain``maxWith(400)`Defines the maximum width of the tooltip.`tooltipTriggerStyling('text-green-500 dark:text-green-400')`Set the color classes that need to be used for the tooltip trigger text and for the tooltip trigger icon.`tooltipTriggerTextStyling('text-green-500 dark:text-green-400')`Set the color classes that need to be used for the tooltip trigger text.`tooltipTriggerIconStyling('text-green-500 dark:text-green-400')`Set the color classes that need to be used for the tooltip trigger icon.### Options with a little bit more context

[](#options-with-a-little-bit-more-context)

#### tooltipIcon

[](#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

[](#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
-------

[](#licence)

The MIT License (MIT). Please see [License File](LICENCE) for more information.

💖 Sponsorships
--------------

[](#-sponsorships)

If you are reliant on this package in your production applications, consider [sponsoring us](https://github.com/sponsors/marshmallow-packages)! It is the best way to help us keep doing what we love to do: making great open source software.

Contributing
------------

[](#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

[](#special-thanks-to)

- [All Contributors](../../contributors)

Made with ❤️ for open source
----------------------------

[](#made-with-️-for-open-source)

At [Marshmallow](https://marshmallow.nl) 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](mailto:hello@marshmallow.nl) if you find it useful in your projects. Follow us on [Twitter](https://x.com/marshmallow_dev) for more updates!

###  Health Score

49

—

FairBetter than 94% of packages

Maintenance89

Actively maintained with recent releases

Popularity33

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity51

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~137 days

Total

4

Last Release

107d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/be33d2624e24c516e73892b0929447cc762f3622c024ab8d0d2a59042e5d2c7f?d=identicon)[marshmallow](/maintainers/marshmallow)

---

Top Contributors

[![stefvanesch](https://avatars.githubusercontent.com/u/46725619?v=4)](https://github.com/stefvanesch "stefvanesch (16 commits)")

---

Tags

laravelnovatooltipmarshmallow

### Embed Badge

![Health badge](/badges/marshmallow-nova-tooltip-field/health.svg)

```
[![Health](https://phpackages.com/badges/marshmallow-nova-tooltip-field/health.svg)](https://phpackages.com/packages/marshmallow-nova-tooltip-field)
```

###  Alternatives

[psalm/plugin-laravel

Psalm plugin for Laravel

3355.3M345](/packages/psalm-plugin-laravel)[renatomarinho/laravel-page-speed

Laravel Page Speed

2.5k1.7M11](/packages/renatomarinho-laravel-page-speed)[vinkius-labs/laravel-page-speed

Laravel Page Speed

2.5k12.5k1](/packages/vinkius-labs-laravel-page-speed)[emargareten/inertia-modal

Inertia Modal is a Laravel package that lets you implement backend-driven modal dialogs for Inertia apps.

90142.9k](/packages/emargareten-inertia-modal)[wearepixel/laravel-cart

A cart implementation for Laravel

1374.8k](/packages/wearepixel-laravel-cart)[tomshaw/electricgrid

A feature-rich Livewire package designed for projects that require dynamic, interactive data tables.

119.4k](/packages/tomshaw-electricgrid)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)
