marshmallow/nova-tooltip-field
Composer 安装命令:
composer require marshmallow/nova-tooltip-field
包简介
This Laravel Nova field enables you to make use of the default Nova Tooltip component.
README 文档
README
Laravel Nova Tooltip Field
This Laravel Nova field enables you to make use of the default Nova Tooltip component.
Screenshot
Requirements
php: ^8.1laravel/nova: ^5.0
Installation
Install via composer:
composer require marshmallow/nova-tooltip-field
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 '<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.
| Method | Description |
|---|---|
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
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!
marshmallow/nova-tooltip-field 适用场景与选型建议
marshmallow/nova-tooltip-field 是一款 基于 Vue 开发的 Composer 扩展包,目前已累计 22.96k 次下载、GitHub Stars 达 3, 最近一次更新时间为 2025 年 01 月 31 日, 在 PHP 生态内属于活跃度较高的组件。
它主要适用于以下技术方向: 「nova」 「laravel」 「tooltip」 「marshmallow」 等业务场景。在实际项目中,围绕这些方向常见需要落地的问题包括:接口对接、性能调优、并发安全、与既有框架(Laravel / ThinkPHP / Yii / Webman 等)的兼容适配,以及生产环境的日志埋点与稳定性保障。
我们在过去多个企业项目中使用过 marshmallow/nova-tooltip-field 或与其功能相近的方案,如果你在选型或落地过程中遇到问题,例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查,欢迎联系我们协助评估。
基于 marshmallow/nova-tooltip-field 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。
线上偶发问题、内存泄漏、慢查询、并发异常等排查修复;针对高流量场景做缓存、队列、索引层面的调优。
承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维;也可按月提供技术保姆服务。
与 marshmallow/nova-tooltip-field 相关的其它包
同方向 / 同关键字的高下载量 PHP Composer 包推荐,方便对比选型:
A Laravel Nova card that shows you your system information.
A Laravel Nova card.
A Laravel Nova tool to give you ability to put tooltip in fields in every where and in menu item
Shim repository for qTip2
A Laravel Nova package for publishable fields
A Laravel Nova package for translatable fields
统计信息
- 总下载量: 22.96k
- 月度下载量: 0
- 日度下载量: 0
- 收藏数: 3
- 点击次数: 22
- 依赖项目数: 0
- 推荐数: 0
其他信息
- 授权协议: MIT
- 更新时间: 2025-01-31
