https://github.com/vitaliy-bobrov/angular-popper

Popover component for Angular 2+ based on Popper.js library.
https://github.com/vitaliy-bobrov/angular-popper

angular popper popup tooltip

Last synced: about 2 months ago
JSON representation

Popover component for Angular 2+ based on Popper.js library.

• Host: GitHub
• URL: https://github.com/vitaliy-bobrov/angular-popper
• Owner: vitaliy-bobrov
• License: mit
• Created: 2017-04-10T09:24:59.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T17:07:45.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T23:58:24.922Z (5 months ago)
• Topics: angular, popper, popup, tooltip
• Language: TypeScript
• Homepage: https://bobrov.dev/angular-popper/
• Size: 2.9 MB
• Stars: 9
• Watchers: 1
• Forks: 2
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular-components - vitaliy-bobrov/angular-popper - Popover component for Angular 2+ based on Popper.js library. (UI Components / Tooltip)

README

        
# angular-popper

[![Build Status](https://travis-ci.org/vitaliy-bobrov/angular-popper.svg?branch=master)](https://travis-ci.org/vitaliy-bobrov/angular-popper)

[![npm version](https://badge.fury.io/js/angular-popper.svg)](https://badge.fury.io/js/angular-popper)

[![npm](https://img.shields.io/npm/dt/angular-popper.svg)](https://github.com/vitaliy-bobrov/angular-popper)

Popover component for Angular 2+ based on [Popper.js](https://popper.js.org/) library.

[Demo](https://vitaliy-bobrov.github.io/angular-popper/)

## Installation

* Angular CLI > v6.0.0: `ng add angular-popper`

* yarn: `yarn add popper.js angular-popper`

* npm: `npm install --save popper.js angular-popper`

## Usage

### Import NgxPopper module

```ts

...

import { NgxPopper } from 'angular-popper';

@NgModule({

  ...

  imports: [

    NgxPopper

  ]

  ..

})

export class AppModule {}

```

### Use in template

```html

  


    Target

  


  
Popper content


```

## Input properties

### show: boolean

**Default**: `true`

Specify if popper visible.

### target?: string | Element

Specify popper element target, accepts HTMLElement reference or CSS selector.

### closeButton: boolean

**Default**: `false`

Specify if popper should contain close button.

### placement: Popper.Placement

**Default**: `'bottom'`

Specify popper placement.

### positionFixed: boolean

**Default**: `false`

Specify if popper should has `fixed` position.

### eventsEnabled: boolean

**Default**: `true`

Specify if popper should listen for scroll & resize events.

### modifiers?: Popper.Modifiers

Popper.js modifiers object, [details](https://popper.js.org/popper-documentation.html#modifiers).

## Events

### close

Fires on popper close button click.