added target element directive

README.md

@@ -103,7 +103,25 @@ SystemJS
     </div>
  ```
 
-5. Attributes map:  
+ 5. Specific target:
+  ```HTML
+ <div class="example">
+       <div #popperTargetElement>The popper will show when hovering over this element</div>
+       <div>bla bla bla bla</div>
+       <div class="rel" id="example5reference1"
+            #popper5
+            [popper]="'As text'"
+            [popperTrigger]="'hover'"
+            [popperPlacement]="'bottom'"
+            [popperTarget]="popperTargetElement"
+            (popperOnShown)="onShown($event)">
+         <p class="bold">Pop</p>
+         <p class="thin">on the bottom</p>
+       </div>
+     </div>
+  ```
+
+6. Attributes map:  
 
     | Option                   | Type              | Default  |
     |:-------------------      |:----------------  |:-------- |
@@ -113,18 +131,19 @@ SystemJS
     | popperDelay              | number            | 0        |
     | popperTimeout            | number            | 0        |
     | popperPlacement          | Placement(string) | auto     |
+    | popperTarget             | HtmlElement       | auto     |
     | popperBoundaries         | string(selector)  | undefined|  
     | popperShowOnStart        | number            | 0        |                         
     | popperTrigger            | Trigger(string)   | hover    |
     | popperModifiers          | popperModifier    | undefined|
     | popperOnShown            | EventEmitter<void>| $event   |    
     | popperOnHidden           | EventEmitter<void>| $event   |
 
-6. Override default    
+7. Override default    
 ```JavaScript
 // Simply override PopperController baseOptions, this will apply to all popper that do not have an attribute set
-// This is a static reference and should run ASAP, preferably before the application is bootstrapped
-constructor(private elem: ElementRef) {
+// This is a static reference and should run ASAP, preferably before the angular application is bootstrapped
+constructor() {
     PopperController.baseOptions.disableAnimation = true;
   }
 ```
@@ -139,7 +158,7 @@ constructor(private elem: ElementRef) {
    | popperModifiers          | popperModifier    | undefined|
 
 
-7. popperPlacement:
+8. popperPlacement:
 
   | 'top'
   | 'bottom'
@@ -160,7 +179,7 @@ constructor(private elem: ElementRef) {
   | 'auto-right'
   | Function
 
-8. popperTrigger:
+9. popperTrigger:
 
   | 'click'
   | 'mousedown'

example/app/app.component.html

@@ -5,6 +5,7 @@
            [popper]="popper1Content"
            [popperShowOnStart]="true"
            [popperTrigger]="'click'"
+           [popperTarget]="popper1"
            [popperPlacement]="example1select" class="rel" id="example10reference1">
         <p class="bold">Hey!</p>
         <p class="thin">Choose where to put your popper!</p>

example/app/app.component.ts

@@ -1,7 +1,7 @@
 import {Component, ElementRef, ViewEncapsulation, OnInit, ViewChild} from '@angular/core';
 import {PopperContent} from '../../src/popper-content';
 import set = Reflect.set;
-import {PopperController} from '../../src/popper';
+import {PopperController} from '../../src/popper-directive';
 /**
  * This class represents the main application component.
  */

example/app/index.ts

@@ -7,8 +7,6 @@ import '@angular/forms';
 import '@angular/platform-browser';
 import '@angular/platform-browser-dynamic';
 import 'rxjs';
-import 'popper.js/dist/umd/popper.js';
-import 'popper.js/dist/umd/popper-utils.js';
 
 import { enableProdMode } from '@angular/core';
 // The browser platform with a compiler

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-popper",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "ngx-popper is an angular wrapper for popper.js",
   "main": "src/index.js",
   "module": "esm/index.js",

src/index.ts

@@ -1,5 +1,5 @@
 import 'popper.js';
-export * from './popper';
+export * from './popper-directive';
 export * from './popper.model';
 export * from './popper-content';
 export * from './popper.module';

src/popper-directive.ts

@@ -44,6 +44,9 @@ export class PopperController implements OnInit, OnChanges {
   @Input('popperTrigger')
   showTrigger: Trigger;
 
+  @Input('popperTarget')
+  targetElement: HTMLElement;
+
   @Input('popperDelay')
   showDelay: number = 0;
 
@@ -136,7 +139,7 @@ export class PopperController implements OnInit, OnChanges {
       this.content.text = text;
     }
     const popperRef = this.content as PopperContent;
-    popperRef.referenceObject = this.getElement();
+    popperRef.referenceObject = this.getRefElement();
     this.setContentProperties(popperRef);
 
     if (this.showOnStart) {
@@ -169,7 +172,7 @@ export class PopperController implements OnInit, OnChanges {
 
     this.shown = true;
     const popperRef = this.content as PopperContent;
-    const element = this.getElement();
+    const element = this.getRefElement();
     if(popperRef.referenceObject !== element){
       popperRef.referenceObject = element;
     }
@@ -212,8 +215,8 @@ export class PopperController implements OnInit, OnChanges {
     }, delay)
   }
 
-  getElement() {
-    return this.viewContainerRef.element.nativeElement;
+  getRefElement() {
+    return this.targetElement || this.viewContainerRef.element.nativeElement;
   }
 
   private overrideShowTimeout() {

src/popper.module.ts

@@ -1,6 +1,6 @@
 import {CommonModule} from "@angular/common";
 import {NgModule} from "@angular/core";
-import {PopperController} from './popper';
+import {PopperController} from './popper-directive';
 import {PopperContent} from './popper-content';
 
 @NgModule({