diff --git a/client/src/js/components/bhInfo.js b/client/src/js/components/bhInfo.js
new file mode 100644
index 0000000000..37c2a48ea3
--- /dev/null
+++ b/client/src/js/components/bhInfo.js
@@ -0,0 +1,15 @@
+angular.module('bhima.components')
+  .component('bhInfo', {
+    template :
+      '<span ' +
+      '  class="text-info fa fa-info-circle" ' +
+      '  uib-popover-template="$ctrl.template" ' +
+      '  popover-placement="right" ' +
+      '  popover-append-to-body="true" ' +
+      '  popover-trigger="mouseenter"> ' +
+      '</span> ',
+    bindings : {
+      template: '@',
+      direction: '@'
+    }
+  });
diff --git a/client/src/partials/patient_invoice/patientInvoice.html b/client/src/partials/patient_invoice/patientInvoice.html
index 3a606cc437..50db10538a 100644
--- a/client/src/partials/patient_invoice/patientInvoice.html
+++ b/client/src/partials/patient_invoice/patientInvoice.html
@@ -46,13 +46,7 @@
 
                 <label class="control-label">
                   {{ "FORM.LABELS.TYPE" | translate }}
-                  <span
-                    class="text-info fa fa-info-circle"
-                    uib-popover-template="'typePopover.tmpl.html'"
-                    popover-placement="right"
-                    popover-append-to-body="true"
-                    popover-trigger="mouseenter">
-                  </span>
+                  <bh-info template="typePopover.tmpl.html" direction="right"></bh-info>
                 </label>
 
                 <!-- TODO distributable vs. non distributable sales or invoices should be designed/reviewed carefully -->
@@ -189,29 +183,27 @@ <h4 ng-repeat="service in PatientInvoiceCtrl.Invoice.billingServices track by se
 
             <h4>
               {{ "FORM.LABELS.BILLING_SERVICES" | translate }}
-
-              <!-- popover template definitions temporarily at the base of this file -->
               <span
-                class="text-info"
+                class="text-info fa fa-info-circle"
                 ng-show="PatientInvoiceCtrl.Invoice.billingServices.length > 0"
                 uib-popover-template="'billingServicesPopover.tmpl.html'"
                 popover-placement="right"
                 popover-append-to-body="true"
-                popover-trigger="mouseenter">
-                <span class="fa fa-info-circle"></span>
+                popover-trigger="mouseenter"
+                >
               </span>
             </h4>
 
             <h4>
               {{ "FORM.LABELS.SUBSIDIES" | translate }}
               <span
-                class="text-info"
+                class="text-info fa fa-info-circle"
                 ng-show="PatientInvoiceCtrl.Invoice.subsidies.length > 0"
                 uib-popover-template="'subsidiesPopover.tmpl.html'"
                 popover-placement="right"
                 popover-append-to-body="true"
-                popover-trigger="mouseenter">
-                <span class="fa fa-info-circle"></span>
+                popover-trigger="mouseenter"
+                >
               </span>
             </h4>