{"id":15217928,"url":"https://github.com/nullvoxpopuli/ember-popperjs","last_synced_at":"2025-09-20T05:33:07.651Z","repository":{"id":37010751,"uuid":"413088118","full_name":"NullVoxPopuli/ember-popperjs","owner":"NullVoxPopuli","description":"Renderless Component for Popper.JS for you to easily make popovers in Ember.JS","archived":false,"fork":false,"pushed_at":"2024-04-28T22:44:10.000Z","size":1577,"stargazers_count":24,"open_issues_count":21,"forks_count":4,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-05-01T23:23:36.190Z","etag":null,"topics":["ember","emberjs","hacktoberfest","popperjs"],"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/NullVoxPopuli.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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":"2021-10-03T13:38:32.000Z","updated_at":"2024-05-06T00:21:00.465Z","dependencies_parsed_at":"2023-02-18T02:30:46.384Z","dependency_job_id":"72038b12-b22c-487b-8d40-b2834caa5014","html_url":"https://github.com/NullVoxPopuli/ember-popperjs","commit_stats":{"total_commits":257,"total_committers":7,"mean_commits":"36.714285714285715","dds":"0.47859922178988323","last_synced_commit":"ea5a184d1dda45ae5647db90629966224fa4cc8c"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullVoxPopuli%2Fember-popperjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullVoxPopuli%2Fember-popperjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullVoxPopuli%2Fember-popperjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullVoxPopuli%2Fember-popperjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NullVoxPopuli","download_url":"https://codeload.github.com/NullVoxPopuli/ember-popperjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233634080,"owners_count":18705952,"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":["ember","emberjs","hacktoberfest","popperjs"],"created_at":"2024-09-28T12:08:10.168Z","updated_at":"2025-09-20T05:33:02.272Z","avatar_url":"https://github.com/NullVoxPopuli.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-popperjs\n\n## Deprecation notice\n\nThis addon is deprecated. [Popperjs](https://www.npmjs.com/package/@popperjs/core) is on the way out -- deprecated by its owners, in favor of [floating-ui](https://github.com/floating-ui/floating-ui), which is what [ember-velcro](https://github.com/CrowdStrike/ember-velcro) uses. If you're looking for a popover/tooltip addon for EmberJS, you should take a look at [ember-velcro](https://github.com/CrowdStrike/ember-velcro).\n\n---\n\n[![npm version](https://badge.fury.io/js/ember-popperjs.svg)](https://badge.fury.io/js/ember-popperjs)\n[![CI](https://github.com/NullVoxPopuli/ember-popperjs/actions/workflows/ci.yml/badge.svg?branch=main\u0026event=push)](https://github.com/NullVoxPopuli/ember-popperjs/actions/workflows/ci.yml)\n\n\nA single `\u003cPopperJS\u003e` component with easy to use API for creating popovers, tooltips, etc.\n\n## Compatibility\n\n* Ember.js v3.25 or above\n* Ember CLI v3.25 or above\n* Webpack v5 or above\n* ember-auto-import v2 or above\n\n## Installation\n\n```\nember install ember-popperjs\n```\n\n## Usage\n\nExample building a `\u003cMenu /\u003e` component\n```hbs\n\u003cPopperJS as |reference popover|\u003e\n  \u003cbutton {{reference}} {{on \"click\" this.yourClickHandler}}\u003e\n    {{yield to=\"trigger\"}}\n  \u003c/button\u003e\n\n  {{#if this.yourVisibilityIndicator}}\n    \u003cdiv {{popover}}\u003e\n      This is a popover!\n      {{yield to=\"default\"}}\n    \u003c/div\u003e\n  {{/if}}\n\u003c/PopperJS\u003e\n```\nThings `\u003cPopperJS\u003e` does not do:\n - provide styles for making a popover\n - provide click handlers for showing and hiding the popover\n\nHowever, this addon pairs nicely with [Tailwind CSS](https://tailwindcss.com/) and [HeadlessUI](https://github.com/GavinJoyce/ember-headlessui)\nand a menu popover may look like: \n\n```hbs\n\u003cMenu as |menu|\u003e\n  \u003cPopperJS as |reference popover|\u003e\n    \u003cmenu.Button\n      {{reference}}\n      class=\"\n        text-black\n        relative rounded-sm border border-gray-900 bg-white px-2 py-1 -my-1 text-left\n        transition ease-in-out duration-150 sm:text-sm\n        focus:ring-4 focus-visible:outline-none focus:outline-none\n      \"\n      ...attributes\n    \u003e\n      {{yield menu to=\"trigger\"}}\n    \u003c/menu.Button\u003e\n\n    \u003cmenu.Items\n      {{popover}}\n      class=\"absolute top-2 z-20 grid mt-1 rounded-sm bg-white shadow-lg min-w-max\"\n      as |items|\n    \u003e\n      {{yield (component 'limber/menu/button' item=items.Item) to=\"options\"}}\n    \u003c/menu.Items\u003e\n  \u003c/PopperJS\u003e\n\u003c/Menu\u003e\n```\n`\u003cMenu\u003e` provides the click handlers and visibility controls that make a\npopover behave as you would expect.\n\n### API\n\n#### yield parameters\n\n```hbs\n\u003cPopperJS as |reference popover|\u003e\n  ...\n\u003c/PopperJS\u003e\n```\n\n- `reference` - modifier - sets up the target element for the popover element to position itself to\n- `popover` - modifier - attaches to the element that is the container of the popover content\n#### arguments\n\n##### `@placement`\n\nThe default placement is `\"bottom-end\"`, but any placement described by the\n`Placement` options on the [popper.js](https://popper.js.org/docs/v2/constructors/#options) site will work.\n\nFor example,\n\n```hbs\n\u003cPopperJS @placement=\"top\" as |reference popover|\u003e\n  ...\n\u003c/PopperJS\u003e\n```\n\n##### `@options`\n\nIf the default options don't suit you, you may override them entirely.\nThese options are not merged with any defaults, but allow straight pass-through, of the [Popper.js Options](https://popper.js.org/docs/v2/constructors/#options) object.\n\nAdditionally, some options require references to the `reference` element as well as the `popover` element, so if you need that level of flexibility, `@options` may also be a function with the following signature:\n```ts\n(reference: HTMLElement, popover: HTMLElement) =\u003e Partial\u003cOptions\u003e;\n```\n\nNote that if using `@options`, `@placement` will be ignored.\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnullvoxpopuli%2Fember-popperjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnullvoxpopuli%2Fember-popperjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnullvoxpopuli%2Fember-popperjs/lists"}