Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mrfrankel/ngx-popper
An angular wrapper for popper.js, great for tooltips and positioning popping elements
https://github.com/mrfrankel/ngx-popper
angular angular2 angular4 angular7 ngx-popper ngx-tooltip popper tooltip tooltips
Last synced: about 1 month ago
JSON representation
An angular wrapper for popper.js, great for tooltips and positioning popping elements
- Host: GitHub
- URL: https://github.com/mrfrankel/ngx-popper
- Owner: MrFrankel
- License: mit
- Created: 2017-05-28T19:29:53.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T06:22:10.000Z (almost 2 years ago)
- Last Synced: 2024-10-10T15:09:09.001Z (about 1 month ago)
- Topics: angular, angular2, angular4, angular7, ngx-popper, ngx-tooltip, popper, tooltip, tooltips
- Language: TypeScript
- Homepage: https://mrfrankel.github.io/ngx-popper/
- Size: 3.14 MB
- Stars: 185
- Watchers: 8
- Forks: 37
- Open Issues: 54
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-popper
[](https://www.npmjs.com/package/ngx-popper)
[](https://www.npmjs.com/package/ngx-popper)
[](https://github.com/MrFrankel/ngx-popper/blob/master/LICENSE) [](https://greenkeeper.io/)
[](https://travis-ci.org/MrFrankel/ngx-popper)
ngx-popper is an angular wrapper for the [Popper.js](https://popper.js.org/) library.
## Changes
As of version 6.0.0 popper content runs in onPush change detection strategy, therefore forceChangeDetection is no longer necessary and is removed
As of version 4.0.0 ngx-popper now use innerHTML binding for string popper i.e:
```HTML
```
This should make no difference but you should be aware.
As 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.
### Installation
node and npm are required to run this package.
1. Use npm/yarn to install the package:
```terminal
$ npm install popper.js --save
$ npm install ngx-popper --save
```
Or
```terminal
$ yarn add popper.js --save
$ yarn add ngx-popper --save
```
2. You simply add into your module `NgxPopperModule`:
```typescript
import {NgxPopperModule} from 'ngx-popper';
@NgModule({
// ...
imports: [
// ...
NgxPopperModule
]
})
```
SystemJS
```
System.config({
paths: {
// paths serve as alias
'npm:': 'libs/'
},
// map tells the System loader where to look for things
map: {
... ,
'ngx-popper': 'npm:ngx-popper',
'popper-directive.js': 'npm:ngx-popper',
'popper.module': 'npm:ngx-popper',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
... ,
'ngx-popper': {
main: 'index.js',
defaultExtension: 'js'
},
'popper.js': {
main: 'popper-directive.js',
defaultExtension: 'js'
},
'popper.module': {
main: './popper.module.js',
defaultExtension: 'js'
}
}
});
```
3. Add to view:
```HTML
Hey!
Choose where to put your popper!
Popper on bottom
```
4. As text:
```HTML
Pop
on the bottom
```
```HTML
Pop
on the bottom
```
5. Position fixed, breaking overflow:
```HTML
```
6. Specific target:
```HTML
```
7. hide/show programmatically:
```HTML
Pop
on the bottom
This is a tooltip with text
Close
```
8. Attributes map:
| Option | Type | Default | Description |
|:----------------------- |:---------------- |:--------- | :------------------------------------------------------------------------------------------------------ |
| popperDisableAnimation | boolean | false | Disable the default animation on show/hide |
| popperDisableStyle | boolean | false | Disable the default styling |
| popperDisabled | boolean | false | Disable the popper, ignore all events |
| popperDelay | number | 0 | Delay time until popper it shown |
| popperTimeout | number | 0 | Set delay before the popper is hidden |
| popperTimeoutAfterShow | number | 0 | Set a time on which the popper will be hidden after it is shown |
| popperPlacement | Placement(string) | auto | The placement to show the popper relative to the reference element |
| popperTarget | HtmlElement | auto | Specify a different reference element other the the one hosting the directive |
| popperBoundaries | string(selector) | undefined | Specify a selector to serve as the boundaries of the element |
| popperShowOnStart | boolean | false | Popper default to show |
| popperTrigger | Trigger(string) | hover | Trigger/Event on which to show/hide the popper |
| popperPositionFixed | boolean | false | Set the popper element to use position: fixed |
| popperAppendTo | string | undefined | append The popper-content element to a given selector, if multiple will apply to first |
| popperPreventOverflow | boolean | undefined | Prevent the popper from being positioned outside the boundary |
| popperHideOnClickOutside | boolean | true | Popper will hide on a click outside |
| popperHideOnScroll | boolean | false | Popper will hide on scroll |
| popperHideOnMouseLeave | boolean | false | Popper will hide on mouse leave |
| popperModifiers | popperModifier | undefined | popper.js custom modifiers hock |
| popperApplyClass | string | undefined | list of comma separated class to apply on ngpx__container |
| popperStyles | Object | undefined | Apply the styles object, aligned with ngStyles |
| popperApplyArrowClass | string | undefined | list of comma separated class to apply on ngpx__arrow |
| popperOnShown | EventEmitter<> | $event | Event handler when popper is shown |
| popperOnHidden | EventEmitter<> | $event | Event handler when popper is hidden |
| popperOnUpdate | EventEmitter<> | $event | Event handler when popper is updated |
| popperAriaDescribeBy | string | undefined | Define value for aria-describeby attribute |
| popperAriaRole | string | popper | Define value for aria-role attribute |
9. Override defaults:
Ngx-popper comes with a few default properties you can override in default to effect all instances
These are overridden by any child attributes.
```JavaScript
NgModule({
imports: [
BrowserModule,
FormsModule,
NgxPopperModule.forRoot({placement: 'bottom'})],
declarations: [AppComponent],
providers: [],
bootstrap: [AppComponent]
})
```
| Options | Type | Default |
|:------------------- |:---------------- |:--------- |
| showDelay | number | 0 |
| disableAnimation | boolean | false |
| disableDefaultStyling | boolean | false |
| placement | Placement(string) | auto |
| boundariesElement | string(selector) | undefined |
| trigger | Trigger(string) | hover |
| popperModifiers | popperModifier | undefined |
| positionFixed | boolean | false |
| hideOnClickOutside | boolean | true |
| hideOnMouseLeave | boolean | false |
| hideOnScroll | boolean | false |
| applyClass | string | undefined |
| styles | Object | undefined |
| applyArrowClass | string | undefined |
| ariaDescribeBy | string | undefined |
| ariaRole | string | undefined |
| appendTo | string | undefined |
| preventOverflow | boolean | undefined |
10. popperPlacement:
| 'top'
| 'bottom'
| 'left'
| 'right'
| 'top-start'
| 'bottom-start'
| 'left-start'
| 'right-start'
| 'top-end'
| 'bottom-end'
| 'left-end'
| 'right-end'
| 'auto'
| 'auto-start'
| 'auto-end'
| Function
11. popperTrigger:
| 'click'
| 'mousedown'
| 'hover'
| 'none'
### Demo
Demo
### Contribute
Hell ya!!!
```terminal
$ npm install
$ npm run build
$ npm run dev //run example
$ npm run start_test //run tests
```