diff --git a/src/bossy-ui/components/popover/popover.component.html b/src/bossy-ui/components/popover/popover.component.html
index 4f9cb982..74d48294 100644
--- a/src/bossy-ui/components/popover/popover.component.html
+++ b/src/bossy-ui/components/popover/popover.component.html
@@ -2,8 +2,8 @@
   <button type="button" id="popover1234" data-toggle="popover" class="btn btn-lg btn-danger" title="" data-original-title="Popover title">Click to toggle popover(ID: popover1234)</button>
   <button type="button" id="popover5678" data-toggle="popover" class="btn btn-lg btn-success" title="" data-original-title="Popover title">Click to toggle popover(ID: popover5678)</button>
 
-  <div *ngIf="hide" name='popover' class="popover fade bs-popover-right show" role="tooltip"  x-placement="right" [style.top]="Top" [style.left]="Left" style="position: absolute; will-change: transform;">
-    <div class="arrow" [style.transform]='rotate' [style.left]='arrowLeft' [style.top]="arrowTop"></div>
+  <div *ngIf="hide" name='popover' class="popover fade bs-popover-right show" role="tooltip"  x-placement="right" [style.top]="popoverTop" [style.left]="popoverLeft" style="position: absolute; will-change: transform;">
+    <div class="arrow" [style.transform]='arrowRotate' [style.left]='arrowLeft' [style.top]="arrowTop"></div>
       <h3 class="popover-header">{{config.popoverTitle}}</h3>
     <div class="popover-body">{{config.popoverData}}
     </div>
diff --git a/src/bossy-ui/components/popover/popover.component.ts b/src/bossy-ui/components/popover/popover.component.ts
index c0d4a822..4de14696 100644
--- a/src/bossy-ui/components/popover/popover.component.ts
+++ b/src/bossy-ui/components/popover/popover.component.ts
@@ -15,49 +15,49 @@ export class BossyPopoverComponent implements OnInit {
   constructor(private _eref: ElementRef, private cdRef: ChangeDetectorRef) {}
 
   hide = false;
-  Top = '0px';
-  Left = '0px';
+  popoverTop = '0px';
+  popoverLeft = '0px';
   eventTarget = undefined;
-  Spacing = 34;
+  arrowSpacing = 34;
   arrowTop = '34px';
   arrowLeft = '0px';
-  rotate = 'rotate(0deg)';
+  arrowRotate = 'rotate(0deg)';
 
   ngOnInit() {
-    this.Top = '0px';
-    this.Left = '0px';
-    this.hide = false;
-    this.eventTarget = undefined;
-    this.Spacing = 34;
-    this.arrowTop = '34px';
-  }
-
-  @HostListener('document:click', ['$event.target'])
-  onClick(event: any) {
-    // This initial if state should only run once and find the popover element assoiciated with and adds an event listener
-    if (this.eventTarget === undefined) {
-      this.calcSpacing();
-      const elements = document.body.querySelectorAll('[id=' + this.config.popoverID + ']');
-      this.eventTarget = elements[0];
-      if (this.eventTarget !== undefined) {
-        this.eventTarget.addEventListener('click', this.ShowPopoverOnClick.bind(this));
-        if (this.eventTarget.contains(event)) {
-          this.ShowPopoverOnClick(event);
-        }
-      } else {
-        console.error('Popover could not resolve element', this.config.popoverID);
+    this.calcSpacing();
+    const elements = document.body.querySelectorAll('[id=' + this.config.popoverID + ']');
+    this.eventTarget = elements[0];
+    if (this.eventTarget !== undefined) {
+      this.eventTarget.addEventListener('click', this.ShowPopoverOnClick.bind(this));
+      if (this.eventTarget.contains(event)) {
+        this.ShowPopoverOnClick(event);
       }
+    } else {
+      console.error('Popover could not resolve element', this.config.popoverID);
     }
+  }
 
 
+  /*
+  * Function this function makes the popover dismiss when clicked outside of it.
+  */
+  @HostListener('document:click', ['$event.target'])
+  onClick(event: any) {
     if (this.eventTarget !== undefined && this.config.dismissable && this.hide) {
-      if (!this.eventTarget.contains(event)) {
+      const popover_ref = this._eref.nativeElement.querySelectorAll('div.popover')[0];
+      if (!this.eventTarget.contains(event) && !popover_ref.contains(event)) {
         this.hide = false;
       }
     }
   }
 
 
+  /*
+  * Function to recalculate everytime where the event target is on screen and place the popover
+  *
+  * Better solution: maybe add a host listener to the event target if position changes update position
+  *                  of the popover and arrow variables. That would clean this up.
+  */
   ShowPopoverOnClick(event: any) {
     if (this.eventTarget !== undefined) {
       if (this.config.placement === 'top') {
@@ -65,33 +65,33 @@ export class BossyPopoverComponent implements OnInit {
         this.cdRef.detectChanges();
         const popover_ref = this._eref.nativeElement.querySelectorAll('div.popover')[0];
         if (popover_ref !== undefined) {
-          this.Top = (this.eventTarget.offsetTop - (popover_ref.offsetHeight)) - (this.Spacing / 4) + 'px';
-          this.Left = this.eventTarget.offsetLeft + (this.eventTarget.offsetWidth / 2) - (popover_ref.offsetWidth / 2) + 'px';
+          this.popoverTop = (this.eventTarget.offsetTop - (popover_ref.offsetHeight)) - (this.arrowSpacing / 4) + 'px';
+          this.popoverLeft = this.eventTarget.offsetLeft + (this.eventTarget.offsetWidth / 2) - (popover_ref.offsetWidth / 2) + 'px';
           this.arrowTop =  (popover_ref.offsetHeight - 10) + 'px';
           this.arrowLeft = popover_ref.offsetWidth / 2 + 'px';
-          this.rotate = 'rotate(270deg)';
+          this.arrowRotate = 'rotate(270deg)';
         }
       } else if (this.config.placement === 'bottom') {
         this.hide = !this.hide;
         this.cdRef.detectChanges();
         const popover_ref = this._eref.nativeElement.querySelectorAll('div.popover')[0];
         if (popover_ref !== undefined) {
-          this.Top = (this.eventTarget.offsetTop + (this.eventTarget.offsetHeight)) + (this.Spacing / 4) + 'px';
-          this.Left = this.eventTarget.offsetLeft + (this.eventTarget.offsetWidth / 2) - (popover_ref.offsetWidth / 2) + 'px';
+          this.popoverTop = (this.eventTarget.offsetTop + (this.eventTarget.offsetHeight)) + (this.arrowSpacing / 4) + 'px';
+          this.popoverLeft = this.eventTarget.offsetLeft + (this.eventTarget.offsetWidth / 2) - (popover_ref.offsetWidth / 2) + 'px';
           this.arrowTop = '-16px';
           this.arrowLeft = popover_ref.offsetWidth / 2 + 'px';
-          this.rotate = 'rotate(90deg)';
+          this.arrowRotate = 'rotate(90deg)';
         }
       } else if (this.config.placement === 'left') {
         this.hide = !this.hide;
         this.cdRef.detectChanges();
         const popover_ref = this._eref.nativeElement.querySelectorAll('div.popover')[0];
         if (popover_ref !== undefined) {
-          this.Left = (this.eventTarget.offsetLeft - popover_ref.offsetWidth - (this.Spacing / 2 )) + 'px';
-          this.Top = (this.eventTarget.offsetTop - ((popover_ref.offsetHeight / 2) - this.eventTarget.offsetHeight / 2 )) + 'px';
+          this.popoverLeft = (this.eventTarget.offsetLeft - popover_ref.offsetWidth - (this.arrowSpacing / 2 )) + 'px';
+          this.popoverTop = (this.eventTarget.offsetTop - ((popover_ref.offsetHeight / 2) - this.eventTarget.offsetHeight / 2 )) + 'px';
           this.arrowTop = popover_ref.offsetHeight / 2 - (popover_ref.firstElementChild.offsetHeight / 2) + 'px';
           this.arrowLeft = (popover_ref.offsetWidth - 1) + 'px';
-          this.rotate = 'rotate(180deg)';
+          this.arrowRotate = 'rotate(180deg)';
         }
       } else {
         if (this.config.placement !== 'right') {
@@ -101,31 +101,36 @@ export class BossyPopoverComponent implements OnInit {
         this.cdRef.detectChanges();
         const popover_ref = this._eref.nativeElement.querySelectorAll('div.popover')[0];
         if (popover_ref !== undefined) {
-          this.Top = (this.eventTarget.offsetTop - ((popover_ref.offsetHeight / 2) - this.eventTarget.offsetHeight / 2)) + 'px';
-          this.Left = this.eventTarget.offsetLeft + this.eventTarget.offsetWidth + 'px';
+          this.popoverTop = (this.eventTarget.offsetTop - ((popover_ref.offsetHeight / 2) - this.eventTarget.offsetHeight / 2)) + 'px';
+          this.popoverLeft = this.eventTarget.offsetLeft + this.eventTarget.offsetWidth + 'px';
           this.arrowTop = popover_ref.offsetHeight / 2 - (popover_ref.firstElementChild.offsetHeight / 2) + 'px';
           this.arrowLeft = '-8px';
-          this.rotate = 'rotate(0deg)';
+          this.arrowRotate = 'rotate(0deg)';
         }
       }
     }
   }
 
+
+  /*
+  * Function when users only specify one field the spacing needs to be modified
+  * so the popover dosen't look 'Super Gross'.
+  */
   calcSpacing() {
     if (this.config.placement === 'top' || this.config.placement === 'bottom') {
       if (this.config.popoverData !== '' && this.config.popoverTitle !== '') {
-        this.Spacing = 34;
+        this.arrowSpacing = 34;
         this.arrowTop = '34px';
       } else {
-        this.Spacing = 17;
+        this.arrowSpacing = 17;
         this.arrowTop = '10px';
       }
     } else {
       if (this.config.popoverData !== '' && this.config.popoverTitle !== '') {
-        this.Spacing = 34;
+        this.arrowSpacing = 34;
         this.arrowTop = '34px';
       } else {
-        this.Spacing = 34;
+        this.arrowSpacing = 34;
         this.arrowTop = '12px';
       }
     }