{"id":29673003,"url":"https://github.com/notchris/payload-label-popover","last_synced_at":"2025-07-22T21:09:33.524Z","repository":{"id":229249157,"uuid":"776235992","full_name":"notchris/payload-label-popover","owner":"notchris","description":"A plugin to add descriptive popovers to field labels in Payload.","archived":false,"fork":false,"pushed_at":"2024-03-24T03:34:01.000Z","size":286,"stargazers_count":15,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-19T22:22:56.144Z","etag":null,"topics":["payload","payload-plugin","popover"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/notchris.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-03-23T00:46:55.000Z","updated_at":"2025-07-05T14:37:18.000Z","dependencies_parsed_at":"2024-03-23T01:45:29.365Z","dependency_job_id":"31f75ce4-c4ae-46d9-8851-519af25ac730","html_url":"https://github.com/notchris/payload-label-popover","commit_stats":null,"previous_names":["notchris/payload-label-popover"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/notchris/payload-label-popover","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notchris%2Fpayload-label-popover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notchris%2Fpayload-label-popover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notchris%2Fpayload-label-popover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notchris%2Fpayload-label-popover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/notchris","download_url":"https://codeload.github.com/notchris/payload-label-popover/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notchris%2Fpayload-label-popover/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266573245,"owners_count":23950187,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["payload","payload-plugin","popover"],"created_at":"2025-07-22T21:09:32.805Z","updated_at":"2025-07-22T21:09:33.514Z","avatar_url":"https://github.com/notchris.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Payload Label Popover Plugin\n#### Adds a descriptive popover to [Payload](https://payloadcms.com/) field labels (using [React Tiny Popover](https://github.com/alexkatz/react-tiny-popover)).\n\n![image](https://github.com/notchris/payload-label-popover/blob/main/example.png?raw=true)\n\n\n## Installation\n\n```bash\n  yarn add payload-label-popover\n  #OR\n  npm i payload-label-popover\n```\n\n## Basic Usage\n\nImport the plugin and add it to your payload configuration file.\n\n```ts\n// Add the plugin to the \"plugins\" array in your payload config\n{\n  // ... Rest of payload config\n  plugins: [labelPopoverPlugin({})]\n}\n```\n\n```ts\n// Enable a popover on a field using the `custom` object\nconst Examples: CollectionConfig = {\n  slug: 'examples',\n  admin: {\n    useAsTitle: 'title',\n  },\n  fields: [\n    {\n      type: 'text',\n      name: 'title',\n      label: 'Hello World',\n      custom: {\n        labelPopover: 'This is a test to see if this popover will work and wrap correctly.',\n        showLabelPopover: true,\n      },\n    },\n  ],\n}\nexport default Examples\n```\n\n### Custom Component for Popover Content\n\nYou can also use a custom component to render content inside of the popover.\n\n```tsx\n// CustomPopoverContent.tsx\nimport React from 'react'\n\ntype Props = {\n  data: string\n}\n\nexport const CustomPopoverContent: React.FC\u003cProps\u003e = props =\u003e {\n  const { data } = props\n  return \u003cdiv style={{ color: 'yellow' }}\u003e{data}\u003c/div\u003e\n}\n```\n\nThen import and pass the component to the 'labelPopover' property in your field config.\n\n```ts\n      custom: {\n        labelPopover: LabelContent({ data: 'HELLO WORLD!!!' }),\n        showLabelPopover: true,\n      }\n```\n\n## Contributing\n\nPull requests are welcome. For major changes, please open an issue first\nto discuss what you would like to change.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotchris%2Fpayload-label-popover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnotchris%2Fpayload-label-popover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotchris%2Fpayload-label-popover/lists"}