{"id":26630292,"url":"https://github.com/elite174/solid-simple-popover","last_synced_at":"2025-04-10T15:23:05.100Z","repository":{"id":214702993,"uuid":"737170014","full_name":"elite174/solid-simple-popover","owner":"elite174","description":"A simple popover component for SolidJS based on floating-ui","archived":false,"fork":false,"pushed_at":"2024-11-02T05:36:32.000Z","size":108,"stargazers_count":12,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T13:17:51.190Z","etag":null,"topics":["component","floating-ui","popover","solid-js"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/elite174.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"publiccode":null,"codemeta":null}},"created_at":"2023-12-30T03:54:07.000Z","updated_at":"2024-12-29T07:27:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"1b365c98-184a-4729-bb2e-8e368dc5bdf8","html_url":"https://github.com/elite174/solid-simple-popover","commit_stats":null,"previous_names":["elite174/solid-simple-popover"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elite174%2Fsolid-simple-popover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elite174%2Fsolid-simple-popover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elite174%2Fsolid-simple-popover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elite174%2Fsolid-simple-popover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elite174","download_url":"https://codeload.github.com/elite174/solid-simple-popover/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248243421,"owners_count":21071054,"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","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":["component","floating-ui","popover","solid-js"],"created_at":"2025-03-24T13:17:59.617Z","updated_at":"2025-04-10T15:23:05.075Z","avatar_url":"https://github.com/elite174.png","language":"TypeScript","readme":"# solid-simple-popover\n\n[![version](https://img.shields.io/npm/v/solid-simple-popover?style=for-the-badge)](https://www.npmjs.com/package/solid-simple-popover)\n![npm](https://img.shields.io/npm/dw/solid-simple-popover?style=for-the-badge)\n\nA really simple and minimalistic popover component for your apps with CSS anchor position support.\n\n**Warning:** CSS anchor positioninig is not supported [everywhere](https://caniuse.com/css-anchor-positioning), so use the version **v3.0** carefully. Use **v2.0** if wide support needed (with floating ui).\n\n**V2 docs are [here](https://github.com/elite174/solid-simple-popover/tree/v2)**\n\n## Features\n\n- Minimalistic - no wrapper DOM nodes!\n- Popover API support\n- Full control over position (CSS Anchor positioning)\n- Works with SSR and Astro\n- Multiple trigger events with vue-style modifiers\n- Custom anchor element\n\n### No wrapper nodes\n\nNo extra DOM nodes. Trigger node will have `data-popover-open` attribute, so you can use it in your CSS styles.\n\n```tsx\n\u003cbutton id=\"trigger-element\"\u003eToggle popover!\u003c/button\u003e\n\u003cPopover triggerElement=\"#trigger-element\"\u003e\n  \u003cdiv\u003eNice content here\u003c/div\u003e\n\u003c/Popover\u003e\n```\n\n### Popover API support\n\nThis component uses Popover API by default.\n\nDon't forget to reset default browser styles for `[popover]`:\n\n```css\n[popover] {\n  margin: 0;\n  background-color: transparent;\n  padding: 0;\n  border: none;\n}\n```\n\n### Full control over position\n\nYou can pass all the options for positioning. See docs for [computePosition](https://floating-ui.com/docs/computePosition).\n\n```tsx\n\u003cbutton id=\"trigger-element\"\u003eToggle popover!\u003c/button\u003e\n\u003cPopover\n  triggerElement=\"#trigger-element\"\n  // Full control over position\n  targetPositionArea=\"top center\"\n\u003e\n  \u003cdiv\u003eI'm a content\u003c/div\u003e\n\u003c/Popover\u003e;\n```\n\n### Multiple trigger events with vue-style modifiers\n\nYou can pass multiple trigger events with modifiers:\n\nEvents support the following modifiers:\n\n- `capture`\n- `once`\n- `prevent`\n- `stop`\n- `passive`\n\n```tsx\n\u003cbutton id=\"trigger-element\"\u003eToggle popover!\u003c/button\u003e\n\u003cPopover\n  triggerElement=\"#trigger-element\"\n  triggerEvents=\"click.capture|pointerdown\"\n\u003e\n  \u003cdiv\u003eI'm a content\u003c/div\u003e\n\u003c/Popover\u003e\n```\n\n### Custom anchor element\n\nSometimes it's necessary the anchor element to be different from trigger element. You may pass optional selector to find anchor element:\n\n```tsx\n\u003cdiv id=\"anchor-element\"\u003e\u003c/div\u003e\n\u003cbutton id=\"trigger-element\"\u003eToggle popover!\u003c/button\u003e\n\u003cPopover\n  triggerElement=\"#trigger-element\"\n  // Here you can pass CSS selector or HTML element\n  anchorElement=\"#anchor-element\"\n\u003e\n  \u003cdiv\u003e\n    \u003cbutton autofocus\u003ehi\u003c/button\u003e\n    This div is visible when popover is open!\n  \u003c/div\u003e\n\u003c/Popover\u003e\n```\n\n## Installation\n\nThis package has the following peer dependencies:\n\n```json\n\"solid-js\": \"^1.8\"\n```\n\nso you need to install required packages by yourself.\n\n`pnpm i solid-js solid-simple-popover`\n\n## Usage\n\n```tsx\nimport { Popover } from \"solid-simple-popover\";\n\n\u003cbutton id=\"trigger-button\"\u003eToggle popover\u003c/button\u003e\n\u003cPopover\n  triggerElement=\"trigger-button\"\n  dataAttributeName=\"data-open\"\n  // You may pass custom selector here\n  anchorElement=\"#trigger-button\"\n  // Astro support\n  contentElementSelector=\"div\"\n\u003e\n  \u003cdiv\u003eThis div is visible when popover is open!\u003c/div\u003e\n\u003c/Popover\u003e;\n```\n\n## Types\n\n```tsx\nimport { JSXElement, ParentComponent } from \"solid-js\";\ntype ValidPositionAreaX =\n  | \"left\"\n  | \"right\"\n  | \"start\"\n  | \"end\"\n  | \"center\"\n  | \"selft-start\"\n  | \"self-end\"\n  | \"x-start\"\n  | \"x-end\";\ntype ValidPositionAreaY =\n  | \"top\"\n  | \"bottom\"\n  | \"start\"\n  | \"end\"\n  | \"center\"\n  | \"self-start\"\n  | \"self-end\"\n  | \"y-start\"\n  | \"y-end\";\nexport type PositionArea = `${ValidPositionAreaY} ${ValidPositionAreaX}`;\nexport type TargetPositionArea =\n  | PositionArea\n  | {\n      top?: (anchorName: string) =\u003e string;\n      left?: (anchorName: string) =\u003e string;\n      right?: (anchorName: string) =\u003e string;\n      bottom?: (anchorName: string) =\u003e string;\n    };\nexport type PopoverProps = {\n  /**\n   * HTML Element or CSS selector to find trigger element which triggers popover\n   */\n  triggerElement?: JSXElement;\n  /**\n   * HTML element or CSS selector to find anchor element which is used for positioning\n   * Can be used with Astro, because astro wraps trigger element into astro-slot\n   * and position breaks\n   */\n  anchorElement?: string | HTMLElement;\n  open?: boolean;\n  defaultOpen?: boolean;\n  /**\n   * Disables listening to trigger events\n   * Note: if your trigger element has `disabled` state (like button or input), popover also won't be triggered\n   */\n  disabled?: boolean;\n  /**\n   * @default \"pointerdown\"\n   * If set to null no event would trigger popover,\n   * so you need to trigger it mannually.\n   * Event name or list of event names separated by \"|\" which triggers popover.\n   * You may also add modifiers like \"capture\", \"passive\", \"once\", \"prevent\", \"stop\" to the event separated by \".\":\n   * @example \"pointerdown.capture.once.prevent|click\"\n   */\n  triggerEvents?: string | null;\n  /**\n   * Close popover on interaction outside\n   * @default true\n   * By default when popover is open it will listen to \"pointerdown\" event outside of popover content and trigger\n   */\n  closeOnOutsideInteraction?: boolean;\n  /**\n   * Data attribute name to set on trigger element\n   * @default \"data-popover-open\"\n   */\n  dataAttributeName?: string;\n  /**\n   * CSS selector to find html element inside content\n   * Can be used with Astro, because astro wraps element into astro-slot\n   * and position breaks\n   */\n  contentElementSelector?: string;\n  /**\n   * Close popover on escape key press.\n   * Uses 'keydown' event with 'Escape' key.\n   * @default true\n   */\n  closeOnEscape?: boolean;\n  onOpenChange?: (open: boolean) =\u003e void;\n  /** @default absolute */\n  targetPosition?: \"absolute\" | \"fixed\";\n  /**\n   * @see https://css-tricks.com/css-anchor-positioning-guide/#aa-position-area\n   * @default \"end center\"\n   */\n  targetPositionArea?: TargetPositionArea;\n  /** @see https://css-tricks.com/css-anchor-positioning-guide/#aa-position-visibility */\n  positionVisibility?: \"always\" | \"anchors-visible\" | \"no-overflow\";\n  /** @see https://css-tricks.com/css-anchor-positioning-guide/#aa-position-try-fallbacks */\n  positionTryFallbacks?: (anchorName: string) =\u003e string[];\n  /** @see https://css-tricks.com/css-anchor-positioning-guide/#aa-position-try-order */\n  positionTryOrder?: \"normal\" | \"most-width\" | \"most-height\" | \"most-block-size\" | \"most-inline-size\";\n  /** @see https://css-tricks.com/css-anchor-positioning-guide/#aa-anchor-size */\n  targetWidth?: string;\n  /** @see https://css-tricks.com/css-anchor-positioning-guide/#aa-anchor-size */\n  targetHeight?: string;\n};\nexport declare const Popover: ParentComponent\u003cPopoverProps\u003e;\n```\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felite174%2Fsolid-simple-popover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felite174%2Fsolid-simple-popover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felite174%2Fsolid-simple-popover/lists"}