{"id":13497232,"url":"https://github.com/MrFrankel/ngx-popper","last_synced_at":"2025-03-28T21:32:14.888Z","repository":{"id":21411667,"uuid":"92682447","full_name":"MrFrankel/ngx-popper","owner":"MrFrankel","description":"An angular wrapper for popper.js, great for tooltips and positioning popping elements","archived":false,"fork":false,"pushed_at":"2022-12-09T06:22:10.000Z","size":3289,"stargazers_count":187,"open_issues_count":54,"forks_count":37,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-21T18:06:42.322Z","etag":null,"topics":["angular","angular2","angular4","angular7","ngx-popper","ngx-tooltip","popper","tooltip","tooltips"],"latest_commit_sha":null,"homepage":"https://mrfrankel.github.io/ngx-popper/","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/MrFrankel.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}},"created_at":"2017-05-28T19:29:53.000Z","updated_at":"2025-02-16T14:56:49.000Z","dependencies_parsed_at":"2022-08-30T15:01:19.269Z","dependency_job_id":null,"html_url":"https://github.com/MrFrankel/ngx-popper","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrFrankel%2Fngx-popper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrFrankel%2Fngx-popper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrFrankel%2Fngx-popper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrFrankel%2Fngx-popper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MrFrankel","download_url":"https://codeload.github.com/MrFrankel/ngx-popper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246085619,"owners_count":20721211,"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":["angular","angular2","angular4","angular7","ngx-popper","ngx-tooltip","popper","tooltip","tooltips"],"created_at":"2024-07-31T20:00:27.140Z","updated_at":"2025-03-28T21:32:14.852Z","avatar_url":"https://github.com/MrFrankel.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","TypeScript","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)","UI Components"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Tooltip"],"readme":"# ngx-popper  \n\n[![npm](https://img.shields.io/npm/v/ngx-popper.svg?style=flat-square)](https://www.npmjs.com/package/ngx-popper) \n[![npm](https://img.shields.io/npm/dm/ngx-popper.svg?style=flat-square)](https://www.npmjs.com/package/ngx-popper) \n[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/MrFrankel/ngx-popper/blob/master/LICENSE) [![Greenkeeper badge](https://badges.greenkeeper.io/MrFrankel/ngx-popper.svg)](https://greenkeeper.io/)\n  \u003cimg src=\"http://badge-size.now.sh/https://unpkg.com/ngx-popper@6.0.7/bundles/ngx-popper.umd.js?compression=brotli\" alt=\"Stable Release Size\"/\u003e\n  \u003cimg src=\"http://badge-size.now.sh/https://unpkg.com/ngx-popper@6.0.7/bundles/ngx-popper.umd.js?compression=gzip\" alt=\"Stable Release Size\"/\u003e\n[![Build Status](https://travis-ci.org/MrFrankel/ngx-popper.svg?branch=master)](https://travis-ci.org/MrFrankel/ngx-popper)\n\nngx-popper is an angular wrapper for the [Popper.js](https://popper.js.org/) library.\n\n## Changes\n\nAs of version 6.0.0 popper content runs in onPush change detection strategy, therefore forceChangeDetection is no longer necessary and is removed\n\n\nAs of version 4.0.0 ngx-popper now use innerHTML binding for string popper i.e:\n```HTML\n\u003cdiv popper=\"some text\"\u003e\u003c/div\u003e\n```\n\nThis should make no difference but you should be aware.\n\nAs of version 4.0.0 popper.model is now popper-model, due to some angular-cli issues, if you are referencing this please update your references.\n\n### Installation\n\nnode and npm are required to run this package.\n\n1. Use npm/yarn to install the package:\n\n  ```terminal\n  $ npm install popper.js --save\n  $ npm install ngx-popper --save \n  ```\n  \n  Or \n  \n   ```terminal\n    $ yarn add popper.js --save\n    $ yarn add ngx-popper --save \n  ```\n\n2. You simply add into your module `NgxPopperModule`:\n\n  ```typescript\n  import {NgxPopperModule} from 'ngx-popper';\n  \n  @NgModule({\n   // ...\n   imports: [\n     // ...\n     NgxPopperModule\n   ]\n  })\n  ```\n  \nSystemJS \n```\n    System.config({\n        paths: {\n            // paths serve as alias\n            'npm:': 'libs/'\n        },\n        // map tells the System loader where to look for things\n        map: {\n            ... ,\n            'ngx-popper': 'npm:ngx-popper',\n            'popper-directive.js': 'npm:ngx-popper',\n            'popper.module': 'npm:ngx-popper',\n        },\n        // packages tells the System loader how to load when no filename and/or no extension\n        packages: {\n            ... ,\n            'ngx-popper': {\n                main: 'index.js',\n                defaultExtension: 'js'\n            },\n            'popper.js': {\n                main: 'popper-directive.js',\n                defaultExtension: 'js'\n            },\n            'popper.module': {\n                main: './popper.module.js',\n                defaultExtension: 'js'\n            }\n        }\n    });\n\n```\n  \n\n3. Add to view:\n\n  ```HTML  \n   \u003cdiv     [popper]=\"popper1Content\"\n            [popperShowOnStart]=\"true\"\n            [popperTrigger]=\"'click'\"\n            [popperHideOnClickOutside]=\"true\"\n            [popperHideOnScroll]=\"true\"\n            [popperPlacement]=\"'bottom'\"\u003e\n         \u003cp class=\"bold\"\u003eHey!\u003c/p\u003e\n         \u003cp class=\"thin\"\u003eChoose where to put your popper!\u003c/p\u003e         \n       \u003c/div\u003e\n       \u003cpopper-content #popper1Content\u003e\n         \u003cp class=\"bold\"\u003ePopper on bottom\u003c/p\u003e\n       \u003c/popper-content\u003e\n  ```\n\n4. As text:\n ```HTML\n      \u003cdiv [popper]=\"'As text'\"\n           [popperTrigger]=\"'hover'\"\n           [popperPlacement]=\"'bottom'\"\n           (popperOnShown)=\"onShown($event)\"\u003e\n        \u003cp class=\"bold\"\u003ePop\u003c/p\u003e\n        \u003cp class=\"thin\"\u003eon the bottom\u003c/p\u003e\n      \u003c/div\u003e\n ```\n\n  ```HTML\n       \u003cdiv popper=\"{{someTextProperty}}\"\n            [popperTrigger]=\"'hover'\"\n            [popperPlacement]=\"'bottom'\"\n            [popperStyles]=\"{'background-color: 'blue''}\",\n            (popperOnShown)=\"onShown($event)\"\u003e\n         \u003cp class=\"bold\"\u003ePop\u003c/p\u003e\n         \u003cp class=\"thin\"\u003eon the bottom\u003c/p\u003e\n       \u003c/div\u003e\n  ```\n \n  5. Position fixed, breaking overflow:\n   ```HTML\n        \u003cdiv [popper]=\"'As text'\"\n             [popperTrigger]=\"'hover'\"\n             [popperPlacement]=\"'bottom'\"\n             [popperPositionFixed]=\"true\"\n             (popperOnShown)=\"onShown($event)\"\u003e\n        \u003c/div\u003e\n   ```\n \n 6. Specific target:\n  ```HTML\n \u003cdiv class=\"example\"\u003e\n       \u003cdiv #popperTargetElement\u003e\u003c/div\u003e\n       \u003cdiv [popper]=\"'As text'\"\n            [popperTrigger]=\"'hover'\"\n            [popperPlacement]=\"'bottom'\"\n            [popperTarget]=\"popperTargetElement.nativeElement\"\n            (popperOnShown)=\"onShown($event)\"\u003e\n       \u003c/div\u003e\n  ```\n  \n7. hide/show programmatically:\n  ```HTML\n   \u003cdiv [popper]=\"tooltipcontent\"\n           [popperTrigger]=\"'hover'\"\n           [popperPlacement]=\"'bottom'\"\n           [popperApplyClass]=\"'popperSpecialStyle'\"\u003e\n        \u003cp class=\"bold\"\u003ePop\u003c/p\u003e\n        \u003cp class=\"thin\"\u003eon the bottom\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cpopper-content #tooltipcontent\u003e\n        \u003cdiv\u003e\n          \u003cp\u003eThis is a tooltip with text\u003c/p\u003e\n          \u003cspan (click)=\"tooltipcontent.hide()\"\u003eClose\u003c/span\u003e\n        \u003c/div\u003e\n      \u003c/popper-content\u003e\n  ```\n \n8. Attributes map:  \n  \n    | Option                       | Type              | Default   | Description                                                                                              |\n    |:-----------------------      |:----------------  |:--------- | :------------------------------------------------------------------------------------------------------  |\n    | popperDisableAnimation       | boolean           | false     | Disable the default animation on show/hide                                                               |\n    | popperDisableStyle           | boolean           | false     | Disable the default styling                                                                              |\n    | popperDisabled               | boolean           | false     | Disable the popper, ignore all events                                                                    |\n    | popperDelay                  | number            | 0         | Delay time until popper it shown                                                                         |\n    | popperTimeout                | number            | 0         | Set delay before the popper is hidden                                                                    |\n    | popperTimeoutAfterShow       | number            | 0         | Set a time on which the popper will be hidden after it is shown                                          |\n    | popperPlacement              | Placement(string) | auto      | The placement to show the popper relative to the reference element                                       |\n    | popperTarget                 | HtmlElement       | auto      | Specify a different reference element other the the one hosting the directive                            |\n    | popperBoundaries             | string(selector)  | undefined | Specify a selector to serve as the boundaries of the element                                             |\n    | popperShowOnStart            | boolean           | false     | Popper default to show                                                                                   |\n    | popperTrigger                | Trigger(string)   | hover     | Trigger/Event on which to show/hide the popper                                                           |\n    | popperPositionFixed          | boolean           | false     | Set the popper element to use position: fixed                                                            |\n    | popperAppendTo               | string            | undefined | append The popper-content element to a given selector, if multiple will apply to first                   |\n    | popperPreventOverflow        | boolean           | undefined | Prevent the popper from being positioned outside the boundary                                            |\n    | popperHideOnClickOutside     | boolean           | true      | Popper will hide on a click outside                                                                      |\n    | popperHideOnScroll           | boolean           | false     | Popper will hide on scroll                                                                               |\n    | popperHideOnMouseLeave       | boolean           | false     | Popper will hide on mouse leave                                                                          |\n    | popperModifiers              | popperModifier    | undefined | popper.js custom modifiers hock                                                                          |\n    | popperApplyClass             | string            | undefined | list of comma separated class to apply on ngpx__container                                                |\n    | popperStyles                 | Object            | undefined | Apply the styles object, aligned with ngStyles                                                           |\n    | popperApplyArrowClass        | string            | undefined | list of comma separated class to apply on ngpx__arrow                                                    |\n    | popperOnShown                | EventEmitter\u003c\u003e    | $event    | Event handler when popper is shown                                                                       |\n    | popperOnHidden               | EventEmitter\u003c\u003e    | $event    | Event handler when popper is hidden                                                                      |\n    | popperOnUpdate               | EventEmitter\u003c\u003e    | $event    | Event handler when popper is updated                                                                     |\n    | popperAriaDescribeBy         | string            | undefined | Define value for aria-describeby attribute                                                               |\n    | popperAriaRole               | string            | popper    | Define value for aria-role attribute                                                                     |\n\n\n\n9. Override defaults:\n\n    Ngx-popper comes with a few default properties you can override in default to effect all instances\n    These are overridden by any child attributes.\n```JavaScript\nNgModule({\n  imports: [\n    BrowserModule,\n    FormsModule,\n    NgxPopperModule.forRoot({placement: 'bottom'})],\n  declarations: [AppComponent],\n  providers: [],\n  bootstrap: [AppComponent]\n\n})\n```\n  \n   | Options                  | Type              | Default   |\n   |:-------------------      |:----------------  |:--------- |\n   | showDelay                | number            | 0         |\n   | disableAnimation         | boolean           | false     |\n   | disableDefaultStyling    | boolean           | false     |\n   | placement                | Placement(string) | auto      |\n   | boundariesElement        | string(selector)  | undefined |\n   | trigger                  | Trigger(string)   | hover     |\n   | popperModifiers          | popperModifier    | undefined |\n   | positionFixed            | boolean           | false     |\n   | hideOnClickOutside       | boolean           | true      |\n   | hideOnMouseLeave         | boolean           | false     |\n   | hideOnScroll             | boolean           | false     |\n   | applyClass               | string            | undefined |\n   | styles                   | Object            | undefined |\n   | applyArrowClass          | string            | undefined |\n   | ariaDescribeBy           | string            | undefined |\n   | ariaRole                 | string            | undefined |\n   | appendTo                 | string            | undefined |\n   | preventOverflow          | boolean           | undefined |\n\n10. popperPlacement:\n\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top-start'\n  | 'bottom-start'\n  | 'left-start'\n  | 'right-start'\n  | 'top-end'\n  | 'bottom-end'\n  | 'left-end'\n  | 'right-end'\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | Function\n  \n11. popperTrigger:\n\n  | 'click'\n  | 'mousedown'\n  | 'hover'\n  | 'none'\n  \n    \n### Demo\n\u003ca href=\"https://mrfrankel.github.io/ngx-popper/\"\u003eDemo\u003c/a\u003e\n\n### Contribute\n  Hell ya!!!\n  \n```terminal\n  $ npm install\n  $ npm run build\n  $ npm run dev  //run example\n  $ npm run start_test  //run tests\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMrFrankel%2Fngx-popper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMrFrankel%2Fngx-popper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMrFrankel%2Fngx-popper/lists"}