{"id":19771562,"url":"https://github.com/floating-ui/svelte-popper","last_synced_at":"2025-09-09T23:11:56.850Z","repository":{"id":38219669,"uuid":"257019026","full_name":"floating-ui/svelte-popper","owner":"floating-ui","description":"🍿🔗Official Svelte wrapper for Popper - the positioning library","archived":false,"fork":false,"pushed_at":"2023-07-11T13:54:00.000Z","size":153,"stargazers_count":34,"open_issues_count":7,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-30T17:46:17.300Z","etag":null,"topics":["dropdowns","popovers","popperjs","positioning","svelte","svelte-component","tooltips"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/floating-ui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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},"funding":{"open_collective":"popperjs","tidelift":"npm/@popperjs/core"}},"created_at":"2020-04-19T14:22:41.000Z","updated_at":"2024-11-24T16:36:55.000Z","dependencies_parsed_at":"2024-02-03T04:43:04.662Z","dependency_job_id":null,"html_url":"https://github.com/floating-ui/svelte-popper","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/floating-ui/svelte-popper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/floating-ui%2Fsvelte-popper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/floating-ui%2Fsvelte-popper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/floating-ui%2Fsvelte-popper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/floating-ui%2Fsvelte-popper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/floating-ui","download_url":"https://codeload.github.com/floating-ui/svelte-popper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/floating-ui%2Fsvelte-popper/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268859123,"owners_count":24318874,"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-08-05T02:00:12.334Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","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":["dropdowns","popovers","popperjs","positioning","svelte","svelte-component","tooltips"],"created_at":"2024-11-12T05:02:23.664Z","updated_at":"2025-08-05T08:14:05.230Z","avatar_url":"https://github.com/floating-ui.png","language":"HTML","funding_links":["https://opencollective.com/popperjs","https://tidelift.com/funding/github/npm/@popperjs/core"],"categories":[],"sub_categories":[],"readme":"# @popperjs/svelte\n\nUse Popper in your Svelte projects.\n\n### Installation\n\n```\nyarn add @popperjs/svelte\n# or\nnpm i @popperjs/svelte\n```\n\n### Usage\n\n```svelte\n\u003cscript\u003e\n  import Popper from \"@popperjs/svelte\";\n\n  // super-simple CSS Object to string serializer\n  const css = obj =\u003e\n    Object.entries(obj || {})\n      .map(x =\u003e x.join(\":\"))\n      .join(\";\");\n\n  // DOM references to the interested elements\n  let referenceElement;\n  let popperElement;\n  let arrowElement;\n\n  // Popper options, reactive to update when arrowElement is set\n  $: popperOptions = {\n    modifiers: [\n      { name: \"offset\", options: { offset: [0, 5] } },\n      { name: \"arrow\", options: { element: arrowElement } }\n    ]\n  };\n\n  // bound variables where Popper will store styles and attributes\n  let styles = {};\n  let attributes = {};\n\n  console.log(styles);\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  /* for some example styles, see `dev/App.svelte` */\n\u003c/style\u003e\n\n\u003cPopper\n  reference={referenceElement}\n  popper={popperElement}\n  options={popperOptions}\n  bind:styles\n  bind:attributes\u003e\n  \u003cbutton bind:this={referenceElement}\u003eReference Element\u003c/button\u003e\n  \u003cdiv\n    bind:this={popperElement}\n    class=\"tooltip\"\n    style={css(styles.popper)}\n    {...attributes.popper}\u003e\n    Popper Element\n    \u003cdiv bind:this={arrowElement} class=\"arrow\" style={css(styles.arrow)} /\u003e\n  \u003c/div\u003e\n\u003c/Popper\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffloating-ui%2Fsvelte-popper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffloating-ui%2Fsvelte-popper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffloating-ui%2Fsvelte-popper/lists"}