https://github.com/notchris/payload-label-popover
A plugin to add descriptive popovers to field labels in Payload.
https://github.com/notchris/payload-label-popover
payload payload-plugin popover
Last synced: 11 months ago
JSON representation
A plugin to add descriptive popovers to field labels in Payload.
- Host: GitHub
- URL: https://github.com/notchris/payload-label-popover
- Owner: notchris
- License: mit
- Created: 2024-03-23T00:46:55.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-24T03:34:01.000Z (about 2 years ago)
- Last Synced: 2025-07-19T22:22:56.144Z (11 months ago)
- Topics: payload, payload-plugin, popover
- Language: JavaScript
- Homepage:
- Size: 279 KB
- Stars: 15
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Payload Label Popover Plugin
#### Adds a descriptive popover to [Payload](https://payloadcms.com/) field labels (using [React Tiny Popover](https://github.com/alexkatz/react-tiny-popover)).
## Installation
```bash
yarn add payload-label-popover
#OR
npm i payload-label-popover
```
## Basic Usage
Import the plugin and add it to your payload configuration file.
```ts
// Add the plugin to the "plugins" array in your payload config
{
// ... Rest of payload config
plugins: [labelPopoverPlugin({})]
}
```
```ts
// Enable a popover on a field using the `custom` object
const Examples: CollectionConfig = {
slug: 'examples',
admin: {
useAsTitle: 'title',
},
fields: [
{
type: 'text',
name: 'title',
label: 'Hello World',
custom: {
labelPopover: 'This is a test to see if this popover will work and wrap correctly.',
showLabelPopover: true,
},
},
],
}
export default Examples
```
### Custom Component for Popover Content
You can also use a custom component to render content inside of the popover.
```tsx
// CustomPopoverContent.tsx
import React from 'react'
type Props = {
data: string
}
export const CustomPopoverContent: React.FC = props => {
const { data } = props
return
{data}
}
```
Then import and pass the component to the 'labelPopover' property in your field config.
```ts
custom: {
labelPopover: LabelContent({ data: 'HELLO WORLD!!!' }),
showLabelPopover: true,
}
```
## Contributing
Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.