From 55f232da792bd68e2f52ee2e2d12825f8f0627b1 Mon Sep 17 00:00:00 2001
From: Abhay Chawla <abhay.chawla97@gmail.com>
Date: Thu, 27 Sep 2018 16:17:02 +0530
Subject: [PATCH] Fix #2888 Incorrect Placement of Tooltips

---
 .../products/createfixeddepositproduct.html   |  60 ++--
 app/views/products/createloanproduct.html     | 107 +++++---
 .../createrecurringdepositproduct.html        |  60 ++--
 app/views/products/createsavingproduct.html   | 257 ++++++++----------
 app/views/products/createshareproduct.html    | 143 +++++-----
 .../products/editfixeddepositproduct.html     |  42 ++-
 app/views/products/editloanproduct.html       |  60 ++--
 .../products/editrecurringdepositproduct.html |  42 ++-
 app/views/products/editsavingproduct.html     |  55 ++--
 app/views/products/editshareproduct.html      | 112 +++++---
 10 files changed, 511 insertions(+), 427 deletions(-)

diff --git a/app/views/products/createfixeddepositproduct.html b/app/views/products/createfixeddepositproduct.html
index ed219a95..95c61c6d 100755
--- a/app/views/products/createfixeddepositproduct.html
+++ b/app/views/products/createfixeddepositproduct.html
@@ -327,9 +327,11 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-3">{{ 'label.input.withholdtax' | translate }}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.withholdtax' | translate}}"></i>
+                        <label class="control-label col-sm-3">{{ 'label.input.withholdtax' | translate }}
+                            <i class="fa fa-question-circle"
+                            uib-tooltip="{{'label.tooltip.withholdtax' | translate}}"
+                            tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="withHoldTax" type="checkbox" ng-model="formData.withHoldTax" ng-true-value="true"
                                    ng-false-value="false">
@@ -571,10 +573,11 @@
                     <div class="col-md-12" ng-show="formData.accountingRule==2">
                         <div class="form-group">
                             <h4>{{"label.heading.assets" | translate}}</h4>
-                            <label class="control-label col-sm-2">{{ 'label.input.savingreference' | translate
-                                }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.savingreference' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.savingreference' | translate }}
+                                <i class="fa fa-question-circle"
+                                   uib-tooltip="{{'label.tooltip.savingreference' | translate}}"
+                                   tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="savingsReferenceAccountId" ng-model="formData.savingsReferenceAccountId"
                                         chosen="assetAccountOptions"
@@ -587,9 +590,11 @@
                         <hr>
                         <div class="form-group">
                             <h4>{{"label.heading.liabilities" | translate}}</h4>
-                            <label class="control-label col-sm-2">{{ 'label.input.savingcontrol' | translate }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.savingcontrol' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.savingcontrol' | translate }}
+                                <i class="fa fa-question-circle"
+                                   uib-tooltip="{{'label.tooltip.savingcontrol' | translate}}"
+                                   tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="savingsControlAccountId" ng-model="formData.savingsControlAccountId"
                                         chosen="liabilityAccountOptions"
@@ -598,10 +603,11 @@
                                         value="{{liabilityAccount.id}}">
                                 </select>
                             </div>
-                            <label class="control-label col-sm-2">{{ 'label.input.savingstransfersinsuspenpense' |
-                                translate }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.savingsuspense' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.savingstransfersinsuspenpense' | translate }}
+                                <i class="fa fa-question-circle"
+                                    uib-tooltip="{{'label.tooltip.savingsuspense' | translate}}"
+                                    tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="transfersInSuspenseAccountId"
                                         ng-model="formData.transfersInSuspenseAccountId"
@@ -615,10 +621,11 @@
                         <hr>
                         <div class="form-group">
                             <h4>{{"label.heading.expenses" | translate}}</h4>
-                            <label class="control-label col-sm-2">{{ 'label.input.interestonsavings' | translate
-                                }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.interestonsavings' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.interestonsavings' | translate }}
+                                <i class="fa fa-question-circle"
+                                   uib-tooltip="{{'label.tooltip.interestonsavings' | translate}}"
+                                   tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="interestOnSavingsAccountId" ng-model="formData.interestOnSavingsAccountId"
                                         chosen="expenseAccountOptions"
@@ -631,9 +638,11 @@
                         <hr>
                         <div class="form-group">
                             <h4>{{"label.heading.income" | translate}}</h4>
-                            <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}
+                                <i class="fa fa-question-circle"
+                                   uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}"
+                                   tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="incomeFromFeeAccountId" ng-model="formData.incomeFromFeeAccountId"
                                         chosen="incomeAccountOptions"
@@ -642,10 +651,11 @@
                                         value="{{incomeAccount.id}}">
                                 </select>
                             </div>
-                            <label class="control-label col-sm-2">{{ 'label.input.incomefrompenalties' | translate
-                                }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.incomefrompenalties' | translate}}"></i></a>
+                            <label class="control-label col-sm-2">{{ 'label.input.incomefrompenalties' | translate }}
+                                <i class="fa fa-question-circle"
+                                   uib-tooltip="{{'label.tooltip.incomefrompenalties' | translate}}"
+                                   tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="incomeFromPenaltyAccountId" ng-model="formData.incomeFromPenaltyAccountId"
                                         chosen="incomeAccountOptions"
diff --git a/app/views/products/createloanproduct.html b/app/views/products/createloanproduct.html
index 0bd5d91b..d536b6de 100755
--- a/app/views/products/createloanproduct.html
+++ b/app/views/products/createloanproduct.html
@@ -1266,10 +1266,11 @@
             <div class="col-md-12" ng-show="isAccountingEnabled()">
                 <div class="form-group">
                     <h4>{{"label.heading.assets" | translate}}</h4>
-                    <label class="control-label col-sm-2">{{ 'label.input.fundsource' | translate }}</label>
-                    <i class="fa fa-question-circle col-sm-1 "
-                       uib-tooltip="{{'label.tooltip.fundsource' | translate}}"></i>
-
+                    <label class="control-label col-sm-2">{{ 'label.input.fundsource' | translate }}
+                        <i class="fa fa-question-circle"
+                           uib-tooltip="{{'label.tooltip.fundsource' | translate}}"
+                           tooltip-append-to-body="true"></i>
+                    </label>
                     <div class="col-sm-3">
                         <select id="fundSourceAccountId" ng-model="formData.fundSourceAccountId"
                                 chosen="assetAccountOptions"
@@ -1278,9 +1279,11 @@
                                 value="{{assetAccount.id}}">
                         </select>
                     </div>
-                    <label class="control-label col-sm-2">{{ 'label.input.loanportfolio' | translate }}</label>
-                    <i class="fa fa-question-circle col-sm-1 "
-                       uib-tooltip="{{'label.tooltip.loanportfolio' | translate}}"></i></a>
+                    <label class="control-label col-sm-2">{{ 'label.input.loanportfolio' | translate }}
+                        <i class="fa fa-question-circle"
+                           uib-tooltip="{{'label.tooltip.loanportfolio' | translate}}"
+                           tooltip-append-to-body="true"></i>
+                    </label>
                     <div class="col-sm-3">
                         <select id="loanPortfolioAccountId" class="form-control"
                                 ng-model="formData.loanPortfolioAccountId"
@@ -1292,10 +1295,11 @@
                     </div>
                 </div>
                 <div class="form-group" ng-show="isAccrualAccountingEnabled()">
-                    <label class="control-label col-sm-2">{{ 'label.input.receivableinterest' | translate }}</label>
-                    <i class="fa fa-question-circle col-sm-1 "
-                       uib-tooltip="{{'label.tooltip.receivableinterest' | translate}}"></i>
-
+                    <label class="control-label col-sm-2">{{ 'label.input.receivableinterest' | translate }}
+                        <i class="fa fa-question-circle"
+                           uib-tooltip="{{'label.tooltip.receivableinterest' | translate}}"
+                           tooltip-append-to-body="true"></i>
+                    </label>
                     <div class="col-sm-3">
                         <select id="receivableInterestAccountId" class="form-control"
                                 ng-model="formData.receivableInterestAccountId" chosen="assetAccountOptions"
@@ -1304,9 +1308,11 @@
                                 value="{{assetAccount.id}}">
                         </select>
                     </div>
-                    <label class="control-label col-sm-2">{{ 'label.input.receivablefees' | translate }}</label>
-                    <i class="fa fa-question-circle col-sm-1 "
-                       uib-tooltip="{{'label.tooltip.receivablefees' | translate}}"></i></a>
+                    <label class="control-label col-sm-2">{{ 'label.input.receivablefees' | translate }}
+                        <i class="fa fa-question-circle"
+                           uib-tooltip="{{'label.tooltip.receivablefees' | translate}}"
+                           tooltip-append-to-body="true"></i>
+                    </label>
                     <div class="col-sm-3">
                         <select id="receivableFeeAccountId" ng-model="formData.receivableFeeAccountId"
                                 chosen="assetAccountOptions"
@@ -1317,10 +1323,11 @@
                     </div>
                 </div>
                 <div class="form-group" ng-show="isAccrualAccountingEnabled()">
-                    <label class="control-label col-sm-2">{{ 'label.input.receivablepenalties' | translate }}</label>
-                    <i class="fa fa-question-circle col-sm-1 "
-                       uib-tooltip="{{'label.tooltip.receivablepenalties' | translate}}"></i>
-
+                    <label class="control-label col-sm-2">{{ 'label.input.receivablepenalties' | translate }}
+                        <i class="fa fa-question-circle"
+                           uib-tooltip="{{'label.tooltip.receivablepenalties' | translate}}"
+                           tooltip-append-to-body="true"></i>
+                    </label>
                     <div class="col-sm-3">
                         <select id="receivablePenaltyAccountId" ng-model="formData.receivablePenaltyAccountId"
                                 chosen="assetAccountOptions"
@@ -1331,9 +1338,11 @@
                     </div>
                 </div>
                 <div class="form-group">
-                    <label class="control-label col-sm-2">{{ 'label.input.transfersinsuspense' | translate }}</label>
-                    <i class="fa fa-question-circle col-sm-1 "
-                       uib-tooltip="{{'label.tooltip.transfersinsuspense' | translate}}"></i></a>
+                    <label class="control-label col-sm-2">{{ 'label.input.transfersinsuspense' | translate }}
+                        <i class="fa fa-question-circle"
+                           uib-tooltip="{{'label.tooltip.transfersinsuspense' | translate}}"
+                           tooltip-append-to-body="true"></i>
+                    </label>
                     <div class="col-sm-3">
                         <select id="transfersInSuspenseAccountId" ng-model="formData.transfersInSuspenseAccountId"
                                 chosen="assetAccountOptions"
@@ -1346,35 +1355,39 @@
                 <hr>
                 <div class="form-group">
                     <h4>{{"label.heading.income" | translate}}</h4>
-                    <label class="control-label col-sm-2">{{ 'label.input.incomefrominterest' | translate }}</label>
-                    <i class="fa fa-question-circle col-sm-1 "
-                       uib-tooltip="{{'label.tooltip.incomefrominterest' | translate}}"></i>
-
+                    <label class="control-label col-sm-2">{{ 'label.input.incomefrominterest' | translate }}
+                        <i class="fa fa-question-circle"
+                           uib-tooltip="{{'label.tooltip.incomefrominterest' | translate}}"
+                           tooltip-append-to-body="true"></i>
+                    </label>
                     <div class="col-sm-3">
                         <select id="interestOnLoanAccountId" ng-model="formData.interestOnLoanAccountId"
                                 chosen="incomeAccountOptions"
                                 ng-options="incomeAccount.id as incomeAccount.name for incomeAccount in incomeAccountOptions"
-                                ng-change="loanproduct.accountingMappings.interestOnLoanAccount.name = formValue(incomeAccountOptions,formData.interestOnLoanAccountId,'id','name')
+                                ng-change="loanproduct.accountingMappings.interestOnLoanAccount.name = formValue(incomeAccountOptions,formData.interestOnLoanAccountId,'id','name')"
                                 value="{{incomeAccount.id}}">
                         </select>
                     </div>
-                    <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}</label>
-                    <i class="fa fa-question-circle col-sm-1 "
-                       uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}"></i></a>
+                    <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}
+                        <i class="fa fa-question-circle"
+                           uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}"
+                           tooltip-append-to-body="true"></i>
+                    </label>
                     <div class="col-sm-3">
                         <select id="incomeFromFeeAccountId" ng-model="formData.incomeFromFeeAccountId"
                                 chosen="incomeAccountOptions"
                                 ng-options="incomeAccount.id as incomeAccount.name for incomeAccount in incomeAccountOptions"
-                                ng-change="loanproduct.accountingMappings.incomeFromFeeAccount.name = formValue(incomeAccountOptions,formData.incomeFromFeeAccountId,'id','name')
+                                ng-change="loanproduct.accountingMappings.incomeFromFeeAccount.name = formValue(incomeAccountOptions,formData.incomeFromFeeAccountId,'id','name')"
                                 value="{{incomeAccount.id}}">
                         </select>
                     </div>
                 </div>
                 <div class="form-group">
-                    <label class="control-label col-sm-2">{{ 'label.input.incomefrompenalties' | translate }}</label>
-                    <i class="fa fa-question-circle col-sm-1 "
-                       uib-tooltip="{{'label.tooltip.incomefrompenalties' | translate}}"></i>
-
+                    <label class="control-label col-sm-2">{{ 'label.input.incomefrompenalties' | translate }}
+                        <i class="fa fa-question-circle"
+                           uib-tooltip="{{'label.tooltip.incomefrompenalties' | translate}}"
+                           tooltip-append-to-body="true"></i>
+                    </label>
                     <div class="col-sm-3">
                         <select id="incomeFromPenaltyAccountId" ng-model="formData.incomeFromPenaltyAccountId"
                                 chosen="incomeAccountOptions"
@@ -1383,9 +1396,11 @@
                                 value="{{incomeAccount.id}}">
                         </select>
                     </div>
-                    <label class="control-label col-sm-2">{{ 'label.input.recoverypayments' | translate }}</label>
-                    <i class="fa fa-question-circle col-sm-1 "
-                       uib-tooltip="{{'label.tooltip.recoverypayments' | translate}}"></i></a>
+                    <label class="control-label col-sm-2">{{ 'label.input.recoverypayments' | translate }}
+                        <i class="fa fa-question-circle"
+                           uib-tooltip="{{'label.tooltip.recoverypayments' | translate}}"
+                           tooltip-append-to-body="true"></i>
+                    </label>
                     <div class="col-sm-3">
                         <select id="incomeFromRecoveryAccountId" ng-model="formData.incomeFromRecoveryAccountId"
                                 chosen="incomeAccountOptions"
@@ -1398,10 +1413,11 @@
                 <hr>
                 <div class="form-group">
                     <h4>{{"label.heading.expenses" | translate}}</h4>
-                    <label class="control-label col-sm-2">{{ 'label.input.loseswrittenoff' | translate }}</label>
-                    <i class="fa fa-question-circle col-sm-1 "
-                       uib-tooltip="{{'label.tooltip.loseswrittenoff' | translate}}"></i>
-
+                    <label class="control-label col-sm-2">{{ 'label.input.loseswrittenoff' | translate }}
+                        <i class="fa fa-question-circle"
+                           uib-tooltip="{{'label.tooltip.loseswrittenoff' | translate}}"
+                           tooltip-append-to-body="true"></i>
+                    </label>
                     <div class="col-sm-3">
                         <select id="writeOffAccountId" ng-model="formData.writeOffAccountId"
                                 chosen="expenseAccountOptions"
@@ -1414,10 +1430,11 @@
                 <hr>
                 <div class="form-group">
                     <h4>{{"label.heading.liabilities" | translate}}</h4>
-                    <label class="control-label col-sm-2">{{ 'label.input.overpaymentliability' | translate }}</label>
-                    <i class="fa fa-question-circle col-sm-1 "
-                       uib-tooltip="{{'label.tooltip.overpaymentliability' | translate}}"></i>
-
+                    <label class="control-label col-sm-2">{{ 'label.input.overpaymentliability' | translate }}
+                        <i class="fa fa-question-circle"
+                           uib-tooltip="{{'label.tooltip.overpaymentliability' | translate}}"
+                           tooltip-append-to-body="true"></i>
+                    </label>
                     <div class="col-sm-3">
                         <select id="overpaymentLiabilityAccountId" ng-model="formData.overpaymentLiabilityAccountId"
                                 chosen="liabilityAccountOptions"
diff --git a/app/views/products/createrecurringdepositproduct.html b/app/views/products/createrecurringdepositproduct.html
index 4ccc3430..2c071bec 100755
--- a/app/views/products/createrecurringdepositproduct.html
+++ b/app/views/products/createrecurringdepositproduct.html
@@ -321,9 +321,11 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-3">{{ 'label.input.withholdtax' | translate }}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.withholdtax' | translate}}"></i>
+                        <label class="control-label col-sm-3">{{ 'label.input.withholdtax' | translate }}
+                            <i class="fa fa-question-circle"
+                               uib-tooltip="{{'label.tooltip.withholdtax' | translate}}"
+                               tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="withHoldTax" type="checkbox" ng-model="formData.withHoldTax" ng-true-value="true"
                                    ng-false-value="false">
@@ -561,10 +563,11 @@
                     <div class="col-md-12" ng-show="formData.accountingRule==2">
                         <div class="form-group">
                             <h4>{{"label.heading.assets" | translate}}</h4>
-                            <label class="control-label col-sm-2">{{ 'label.input.savingreference' | translate
-                                }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.savingreference' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.savingreference' | translate }}
+                                <i class="fa fa-question-circle"
+                                   uib-tooltip="{{'label.tooltip.savingreference' | translate}}"
+                                   tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="savingsReferenceAccountId" ng-model="formData.savingsReferenceAccountId"
                                         chosen="assetAccountOptions"
@@ -577,9 +580,11 @@
                         <hr>
                         <div class="form-group">
                             <h4>{{"label.heading.liabilities" | translate}}</h4>
-                            <label class="control-label col-sm-2">{{ 'label.input.savingcontrol' | translate }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.savingcontrol' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.savingcontrol' | translate }}
+                                <i class="fa fa-question-circle"
+                                   uib-tooltip="{{'label.tooltip.savingcontrol' | translate}}"
+                                   tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="savingsControlAccountId" ng-model="formData.savingsControlAccountId"
                                         chosen="liabilityAccountOptions"
@@ -588,10 +593,11 @@
                                         value="{{liabilityAccount.id}}">
                                 </select>
                             </div>
-                            <label class="control-label col-sm-2">{{ 'label.input.savingstransfersinsuspenpense' |
-                                translate }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.savingsuspense' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.savingstransfersinsuspenpense' | translate }}
+                                <i class="fa fa-question-circle"
+                                   uib-tooltip="{{'label.tooltip.savingsuspense' | translate}}"
+                                   tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="transfersInSuspenseAccountId"
                                         ng-model="formData.transfersInSuspenseAccountId"
@@ -605,10 +611,11 @@
                         <hr>
                         <div class="form-group">
                             <h4>{{"label.heading.expenses" | translate}}</h4>
-                            <label class="control-label col-sm-2">{{ 'label.input.interestonsavings' | translate
-                                }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.interestonsavings' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.interestonsavings' | translate }}
+                                <i class="fa fa-question-circle"
+                                   uib-tooltip="{{'label.tooltip.interestonsavings' | translate}}"
+                                   tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="interestOnSavingsAccountId" ng-model="formData.interestOnSavingsAccountId"
                                         chosen="expenseAccountOptions"
@@ -621,9 +628,11 @@
                         <hr>
                         <div class="form-group">
                             <h4>{{"label.heading.income" | translate}}</h4>
-                            <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}
+                                <i class="fa fa-question-circle"
+                                   uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}"
+                                   tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="incomeFromFeeAccountId" ng-model="formData.incomeFromFeeAccountId"
                                         chosen="incomeAccountOptions"
@@ -632,10 +641,11 @@
                                         value="{{incomeAccount.id}}">
                                 </select>
                             </div>
-                            <label class="control-label col-sm-2">{{ 'label.input.incomefrompenalties' | translate
-                                }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.incomefrompenalties' | translate}}"></i></a>
+                            <label class="control-label col-sm-2">{{ 'label.input.incomefrompenalties' | translate }}
+                                <i class="fa fa-question-circle"
+                                   uib-tooltip="{{'label.tooltip.incomefrompenalties' | translate}}"
+                                   tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="incomeFromPenaltyAccountId" ng-model="formData.incomeFromPenaltyAccountId"
                                         chosen="incomeAccountOptions"
diff --git a/app/views/products/createsavingproduct.html b/app/views/products/createsavingproduct.html
index d95427ed..786a1b50 100755
--- a/app/views/products/createsavingproduct.html
+++ b/app/views/products/createsavingproduct.html
@@ -12,10 +12,10 @@
                     <!--<h3>{{ 'label.heading.details' | translate }}</h3>-->
                     <hr>
                     <div class="form-group">
-                        <label class="control-label col-sm-2">{{ 'label.input.productname' | translate }}<span
-                                class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.productname' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.productname' | translate }}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.productname' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-3">
                             <input ng-autofocus="true" id="name" class="form-control" name="name" type="text"
                                    ng-model="formData.name"
@@ -26,10 +26,10 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-2">{{ 'label.input.product.shortname' | translate }}<span
-                                class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.shortname' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.product.shortname' | translate }}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.shortname' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-3">
                             <input type="text" id="shortName" name="shortName" class="form-control"
                                    ng-model="formData.shortName"
@@ -40,9 +40,9 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-2">{{ 'label.input.description' | translate }}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.description' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.description' | translate }}
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.description' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-3">
                             <textarea rows="2" id="description" name="description" class="form-control"
                                       ng-model="formData.description"></textarea>
@@ -66,10 +66,10 @@
                     <!--<h3>{{ 'label.heading.currency' | translate }}</h3>-->
                     <hr>
                     <div class="form-group">
-                        <label class="control-label col-sm-2">{{ 'label.input.currency' | translate }}<span
-                                class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.currency' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.currency' | translate }}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.currency' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <select id="currencyCode" ng-model="formData.currencyCode" class="form-control"
                                     ng-options="currency.code as currency.name for currency in product.currencyOptions"
@@ -77,10 +77,10 @@
                                     value="{{currency.code}}">
                             </select>
                         </div>
-                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.decimalplaces' | translate
-                            }}<span class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.decimalplaces' | translate}}"></i>
+                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.decimalplaces' | translate}}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.decimalplaces' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input type="text" id="digitsAfterDecimal" name="decimalplace" class="form-control"
                                    ng-model="formData.digitsAfterDecimal" required late-validate number=true />
@@ -90,10 +90,10 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-2">{{ 'label.input.multiplesof' | translate }}<span
-                                class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.multiplesof' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.multiplesof' | translate }}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.multiplesof' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input type="text" id="inMultiplesOf" class="form-control" name="multiplesof"
                                    ng-model="formData.inMultiplesOf"
@@ -118,10 +118,10 @@
                     <!--<h3>{{ 'label.heading.terms' | translate }}</h3>-->
                     <hr>
                     <div class="form-group">
-                        <label class="control-label col-sm-2">{{ 'label.input.nominalannualinterestrate' | translate
-                            }}<span class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.nominalannualinterest' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.nominalannualinterestrate' | translate}}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.nominalannualinterest' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="nominalAnnualInterestRate" name="nominalAnnualInterestRate" type="text"
                                    class="form-control"
@@ -132,10 +132,10 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-2">{{ 'label.input.interestcompoundingperiod' | translate
-                            }}<span class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.interestcompoundingperiod' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.interestcompoundingperiod' | translate}}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.interestcompoundingperiod' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <select id="interestCompoundingPeriodTypeOptions" class="form-control"
                                     ng-model="formData.interestCompoundingPeriodType"
@@ -143,10 +143,10 @@
                                     ng-change="savingproduct.interestCompoundingPeriodOption.value = formValue(product.interestCompoundingPeriodTypeOptions,formData.interestCompoundingPeriodType)"
                                     value="{{type.id}}"></select>
                         </div>
-                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.interestpostingperiod' |
-                            translate }}<span class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.interestpostingperiod' | translate}}"></i>
+                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.interestpostingperiod' | translate }}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.interestpostingperiod' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <select id="interestPostingPeriodTypeOptions" class="form-control"
                                     ng-model="formData.interestPostingPeriodType"
@@ -156,10 +156,10 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-2">{{ 'label.input.interestcalculatedusing' | translate
-                            }}<span class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.interestcalculatedusing' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.interestcalculatedusing' | translate }}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.interestcalculatedusing' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <select id="interestCalculationType" class="form-control"
                                     ng-model="formData.interestCalculationType"
@@ -167,10 +167,10 @@
                                     ng-change="savingproduct.interestCalculationOption.value = formValue(product.interestCalculationTypeOptions,formData.interestCalculationType)"
                                     value="{{type.id}}"></select>
                         </div>
-                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.daysinyears' | translate
-                            }}<span class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.daysinyear' | translate}}"></i>
+                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.daysinyears' | translate }}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.daysinyear' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <select id="interestCalculationDaysInYearType" class="form-control"
                                     ng-model="formData.interestCalculationDaysInYearType"
@@ -194,19 +194,17 @@
                     <!--<h3>{{ 'label.heading.settings' | translate }}</h3>-->
                     <hr>
                     <div class="form-group">
-                        <label class="control-label col-sm-2">{{ 'label.input.minimumopeningbalance' | translate
-                            }}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.minimumopeningbalance' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.minimumopeningbalance' | translate }}
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.minimumopeningbalance' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="minRequiredOpeningBalance" type="text" name="minRequiredOpeningBalance" class="form-control"
                                    number-format ng-model="formData.minRequiredOpeningBalance" late-validate number=true>
                             <form-validate valattributeform="Settings" valattribute="minRequiredOpeningBalance"/>
                         </div>
-                        <label class="control-label col-sm-2">{{ 'label.input.lockinPeriodFrequency' | translate
-                            }}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.lockinPeriodFrequency' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.lockinPeriodFrequency' | translate }}
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.lockinPeriodFrequency' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="lockinPeriodFrequency" type="text" name="lockinPeriodFrequency" class="form-control"
                                    ng-model="formData.lockinPeriodFrequency" late-validate number=true>
@@ -223,55 +221,51 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-3">{{ 'label.input.withdrawalfeefortransfers' | translate
-                            }}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.withdrawalfeefortransfers' | translate}}"></i>
+                        <label class="control-label col-sm-3">{{ 'label.input.withdrawalfeefortransfers' | translate }}
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.withdrawalfeefortransfers' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="withdrawalFeeForTransfers" type="checkbox"
                                    ng-model="formData.withdrawalFeeForTransfers"
                                    ng-true-value="true" ng-false-value="false">
                         </div>
-                        <label class="control-label col-sm-2">{{ 'label.input.minbalanceforinterest' | translate
-                            }}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.minbalanceforinterest' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.minbalanceforinterest' | translate}}
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.minbalanceforinterest' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="minBalanceForInterestCalculation" type="text" class="form-control"
                                    number-format ng-model="formData.minBalanceForInterestCalculation">
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-3">{{ 'label.input.enforceMinRequiredBalance' | translate
-                            }}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.enforceMinRequiredBalance' | translate}}"></i>
+                        <label class="control-label col-sm-3">{{ 'label.input.enforceMinRequiredBalance' | translate }}
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.enforceMinRequiredBalance' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="enforceMinRequiredBalance" type="checkbox"
                                    ng-model="formData.enforceMinRequiredBalance"/>
                         </div>
-                        <label class="control-label col-sm-2">{{'label.input.minRequiredBalance' | translate }}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.minRequiredBalance' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{'label.input.minRequiredBalance' | translate }}
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.minRequiredBalance' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="minRequiredBalance" type="text" class="form-control"
                                    number-format ng-model="formData.minRequiredBalance"/>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-3">{{ 'label.input.allowoverdraft' | translate }}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.allowoverdraft' | translate}}"></i>
+                        <label class="control-label col-sm-3">{{ 'label.input.allowoverdraft' | translate }}
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.allowoverdraft' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="allowOverdraft" type="checkbox" ng-model="formData.allowOverdraft"
                                    ng-true-value="true"
                                    ng-false-value="false">
                         </div>
                         <div ng-show="formData.allowOverdraft">
-                            <label class="control-label col-sm-2">{{'label.input.overdraftlimit' | translate}}</label>
-                            <i class="fa fa-question-circle col-sm-1"
-                               uib-tooltip="{{'label.tooltip.overdraftlimit' | translate}}"></i>
-
+                            <label class="control-label col-sm-2">{{'label.input.overdraftlimit' | translate}}
+                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.overdraftlimit' | translate}}" tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-2">
                                 <input id="overdraftLimit" type="text" class="form-control"
                                        ng-model="formData.overdraftLimit">
@@ -279,21 +273,17 @@
                         </div>
                     </div>
                     <div class="form-group" ng-show="formData.allowOverdraft">
-                        <label class="control-label col-sm-3">{{'label.input.nominalannualinterestrateoverdraft' |
-                            translate}}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.nominalannualinterestrateoverdraft' | translate}}"></i>
-
+                        <label class="control-label col-sm-3">{{'label.input.nominalannualinterestrateoverdraft' | translate}}
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.nominalannualinterestrateoverdraft' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="nominalAnnualInterestRateOverdraft" type="text" class="form-control"
                                    ng-model="formData.nominalAnnualInterestRateOverdraft">
                         </div>
 
-                        <label class="control-label col-sm-2">{{'label.input.minoverdraftforinterestcalculation' |
-                            translate}}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.minoverdraftforinterestcalculation' | translate}}"></i>
-
+                        <label class="control-label col-sm-2">{{'label.input.minoverdraftforinterestcalculation' | translate}}
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.minoverdraftforinterestcalculation' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="minOverdraftForInterestCalculation" type="text" class="form-control"
                                    ng-model="formData.minOverdraftForInterestCalculation">
@@ -301,9 +291,9 @@
                     </div>
 
                     <div class="form-group">
-                        <label class="control-label col-sm-3">{{ 'label.input.withholdtax' | translate }}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.withholdtax' | translate}}"></i>
+                        <label class="control-label col-sm-3">{{ 'label.input.withholdtax' | translate }}
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.withholdtax' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="withHoldTax" type="checkbox" ng-model="formData.withHoldTax" ng-true-value="true"
                                    ng-false-value="false">
@@ -324,20 +314,18 @@
                     </div>
 
                     <div class="form-group">
-                        <label class="control-label col-sm-3">{{ 'label.input.isDormancyTrackingActive' | translate
-                            }}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.isDormancyTrackingActive' | translate}}"></i>
+                        <label class="control-label col-sm-3">{{ 'label.input.isDormancyTrackingActive' | translate }}
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.isDormancyTrackingActive' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="isDormancyTrackingActive" type="checkbox"
                                    ng-model="formData.isDormancyTrackingActive" ng-true-value="true"
                                    ng-false-value="false">
                         </div>
                         <div ng-show="formData.isDormancyTrackingActive">
-                            <label class="control-label col-sm-2">{{'label.input.daysToInactive' | translate}}</label>
-                            <i class="fa fa-question-circle col-sm-1"
-                               uib-tooltip="{{'label.tooltip.daysToInactive' | translate}}"></i>
-
+                            <label class="control-label col-sm-2">{{'label.input.daysToInactive' | translate}}
+                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.daysToInactive' | translate}}" tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-2">
                                 <input id="daysToInactive" type="text" class="form-control"
                                        ng-model="formData.daysToInactive">
@@ -345,19 +333,17 @@
                         </div>
                     </div>
                     <div class="form-group" ng-show="formData.isDormancyTrackingActive">
-                        <label class="control-label col-sm-3">{{'label.input.daysToDormancy' | translate}}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.daysToDormancy' | translate}}"></i>
-
+                        <label class="control-label col-sm-3">{{'label.input.daysToDormancy' | translate}}
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.daysToDormancy' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="daysToDormancy" type="text" class="form-control"
                                    ng-model="formData.daysToDormancy">
                         </div>
 
-                        <label class="control-label col-sm-2">{{'label.input.daysToEscheat' | translate}}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.daysToEscheat' | translate}}"></i>
-
+                        <label class="control-label col-sm-2">{{'label.input.daysToEscheat' | translate}}
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.daysToEscheat' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="daysToEscheat" type="text" class="form-control"
                                    ng-model="formData.daysToEscheat">
@@ -444,10 +430,9 @@
                     <div class="col-md-12" ng-show="formData.accountingRule==2">
                         <div class="form-group">
                             <h4>{{"label.heading.assets" | translate}}</h4>
-                            <label class="control-label col-sm-2">{{ 'label.input.savingreference' | translate
-                                }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.savingreference' | translate}}"></i>
+                            <label class="control-label">{{ 'label.input.savingreference' | translate }}
+                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.savingreference' | translate}}" tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="savingsReferenceAccountId" ng-model="formData.savingsReferenceAccountId"
                                         chosen="assetAccountOptions"
@@ -456,10 +441,9 @@
                                         value="{{assetAccount.id}}">
                                 </select>
                             </div>
-                            <label class="control-label col-sm-2">{{ 'label.input.overdraftportfoliocontrol' | translate
-                                }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.overdraftprotfolio' | translate}}"></i></a>
+                            <label class="control-label col-sm-2">{{ 'label.input.overdraftportfoliocontrol' | translate }}
+                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.overdraftprotfolio' | translate}}" tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="overdraftPortfolioControlId" ng-model="formData.overdraftPortfolioControlId"
                                         chosen="assetAccountOptions"
@@ -472,9 +456,9 @@
                         <hr>
                         <div class="form-group">
                             <h4>{{"label.heading.liabilities" | translate}}</h4>
-                            <label class="control-label col-sm-2">{{ 'label.input.savingcontrol' | translate }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.savingcontrol' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.savingcontrol' | translate }}
+                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.savingcontrol' | translate}}" tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="savingsControlAccountId" ng-model="formData.savingsControlAccountId"
                                         chosen="liabilityAccountOptions"
@@ -483,10 +467,9 @@
                                         value="{{liabilityAccount.id}}">
                                 </select>
                             </div>
-                            <label class="control-label col-sm-2">{{ 'label.input.savingstransfersinsuspenpense' |
-                                translate }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.savingsuspense' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.savingstransfersinsuspenpense' | translate }}
+                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.savingsuspense' | translate}}" tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="transfersInSuspenseAccountId"
                                         ng-model="formData.transfersInSuspenseAccountId"
@@ -498,10 +481,9 @@
                             </div>
                         </div>
                         <div class="form-group" ng-show="formData.isDormancyTrackingActive">
-                            <label class="control-label col-sm-2">{{ 'label.input.escheatLiability' | translate
-                                }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.escheatLiability' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.escheatLiability' | translate }}
+                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.escheatLiability' | translate}}" tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="escheatLiabilityId" ng-model="formData.escheatLiabilityId"
                                         chosen="liabilityAccountOptions"
@@ -514,10 +496,9 @@
                         <hr>
                         <div class="form-group">
                             <h4>{{"label.heading.expenses" | translate}}</h4>
-                            <label class="control-label col-sm-2">{{ 'label.input.interestonsavings' | translate
-                                }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.interestonsavings' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.interestonsavings' | translate }}
+                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.interestonsavings' | translate}}" tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="interestOnSavingsAccountId" ng-model="formData.interestOnSavingsAccountId"
                                         chosen="expenseAccountOptions"
@@ -526,9 +507,9 @@
                                         value="{{expenseAccount.id}}">
                                 </select>
                             </div>
-                            <label class="control-label col-sm-2">{{ 'label.input.writeOff' | translate }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.Writeoffoverdraft' | translate}}"></i></a>
+                            <label class="control-label col-sm-2">{{ 'label.input.writeOff' | translate }}
+                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.Writeoffoverdraft' | translate}}" tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="writeOffAccountId" ng-model="formData.writeOffAccountId"
                                         chosen="expenseAccountOptions"
@@ -541,9 +522,9 @@
                         <hr>
                         <div class="form-group">
                             <h4>{{"label.heading.income" | translate}}</h4>
-                            <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}
+                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}" tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="incomeFromFeeAccountId" ng-model="formData.incomeFromFeeAccountId"
                                         chosen="incomeAccountOptions"
@@ -552,10 +533,9 @@
                                         value="{{incomeAccount.id}}">
                                 </select>
                             </div>
-                            <label class="control-label col-sm-2">{{ 'label.input.incomefrompenalties' | translate
-                                }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.incomefrompenalties' | translate}}"></i></a>
+                            <label class="control-label col-sm-2">{{ 'label.input.incomefrompenalties' | translate }}
+                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.incomefrompenalties' | translate}}" tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="incomeFromPenaltyAccountId" ng-model="formData.incomeFromPenaltyAccountId"
                                         chosen="incomeAccountOptions"
@@ -566,10 +546,9 @@
                             </div>
                         </div>
                         <div class="form-group">
-                            <label class="control-label col-sm-2">{{ 'label.input.interest.on.overdrafts' | translate
-                                }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.incomefromoverdraftinterest' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.interest.on.overdrafts' | translate }}
+                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.incomefromoverdraftinterest' | translate}}" tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="incomeFromInterestId" ng-model="formData.incomeFromInterestId"
                                         chosen="incomeAccountOptions"
diff --git a/app/views/products/createshareproduct.html b/app/views/products/createshareproduct.html
index 151d5ffd..5859006b 100644
--- a/app/views/products/createshareproduct.html
+++ b/app/views/products/createshareproduct.html
@@ -13,10 +13,10 @@
                     <!--<h3>{{ 'label.heading.details' | translate }}</h3>-->
                     <hr>
                     <div class="form-group">
-                        <label class="control-label col-sm-2">{{ 'label.input.productname' | translate }}<span
-                                class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.shareproductname' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.productname' | translate }}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.shareproductname' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-3">
                             <input ng-autofocus="true" id="name" class="form-control" name="name" type="text"
                                    ng-model="formData.name"
@@ -27,10 +27,10 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-2">{{ 'label.input.product.shortname' | translate }}<span
-                                class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.shareproductshortname' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.product.shortname' | translate }}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.shareproductshortname' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-3">
                             <input type="text" id="shortName" name="shortName" class="form-control"
                                    ng-model="formData.shortName"
@@ -41,10 +41,10 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-2">{{ 'label.input.description' | translate }} <span
-                                class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.shareproductdescription' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.description' | translate }}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.shareproductdescription' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-3">
                             <textarea rows="2" id="description" name="description" class="form-control"
                                       ng-model="formData.description" required late-validate></textarea>
@@ -68,10 +68,10 @@
                     <!--<h3>{{ 'label.heading.currency' | translate }}</h3>-->
                     <hr>
                     <div class="form-group">
-                        <label class="control-label col-sm-2">{{ 'label.input.currency' | translate }}<span
-                                class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.currency' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.currency' | translate }}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.currency' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <select id="currencyCode" ng-model="formData.currencyCode" class="form-control"
                                     ng-options="currency.code as currency.name for currency in product.currencyOptions"
@@ -79,10 +79,10 @@
                                     value="{{currency.code}}">
                             </select>
                         </div>
-                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.decimalplaces' | translate
-                            }}<span class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.shareproductdecimalplaces' | translate}}"></i>
+                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.decimalplaces' | translate }}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.shareproductdecimalplaces' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input type="text" id="digitsAfterDecimal" name="decimalplace" class="form-control"
                                    ng-model="formData.digitsAfterDecimal" required late-validate number=true />
@@ -92,10 +92,10 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-2">{{ 'label.input.multiplesof' | translate }}<span
-                                class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.multiplesof' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.multiplesof' | translate }}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.multiplesof' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input type="text" id="inMultiplesOf" class="form-control" name="multiplesof"
                                    ng-model="formData.inMultiplesOf"
@@ -120,10 +120,10 @@
                     <!--<h3>{{ 'label.heading.terms' | translate }}</h3>-->
                     <hr>
                     <div class="form-group">
-                        <label class="control-label col-sm-2">{{ 'label.input.totalnumberofshares' | translate }}<span
-                                class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.totalshares' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.totalnumberofshares' | translate }}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.totalshares' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="totalnumberofshares" name="totalnumberofshares" number-format
                                    class="form-control"
@@ -133,10 +133,10 @@
                             <form-validate valattributeform="Terms" valattribute="totalnumberofshares"/>
                         </div>
 
-                        <label class="control-label col-sm-2">{{ 'label.input.totalsharestobeissue' | translate
-                            }}<span class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.totalsharestobeissued' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.totalsharestobeissue' | translate }}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.totalsharestobeissued' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input ng-autofocus="true" type="text" id="totalsharestobeissued" name="totalsharestobeissued"
                                    ng-model="formData.sharesIssued"
@@ -146,10 +146,10 @@
 
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-2">{{ 'label.input.nominalprice' | translate }}<span
-                                class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.nominalprice' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.nominalprice' | translate }}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.nominalprice' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="nominalprice" name="nominalprice" number-format class="form-control"
                                    ng-model="formData.unitPrice" required late-validate number=true ng-change = "shareCapitaValue()"/>
@@ -158,10 +158,9 @@
                             <form-validate valattributeform="Terms" valattribute="nominalprice"/>
                         </div>
 
-                        <label class="control-label col-sm-2">{{ 'label.input.capitalvalue' | translate }}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.capitalvalue' | translate}}"></i>
-
+                        <label class="control-label col-sm-2">{{ 'label.input.capitalvalue' | translate }}
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.capitalvalue' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input type="text" id="capitalvalue" name="capitalvaue" ng-model="formData.shareCapital"
                               number-format class="form-control" maxlength="4" disabled/>
@@ -184,10 +183,10 @@
                     <hr>
 
                     <div class="form-group">
-                        <label class="control-label col-sm-3">{{ 'label.input.sharesperclient' | translate }}<span class="required">*</span></label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.sharesperclient' | translate}}"></i>
-
+                        <label class="control-label col-sm-3">{{ 'label.input.sharesperclient' | translate }}
+                            <span class="required">*</span>
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.sharesperclient' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="minimumshares" placeholder="{{'label.input.minimum' | translate}}" type="text"
                                    class="form-control" ng-model="formData.minimumShares" required late-validate>
@@ -208,10 +207,9 @@
                     </div>
 
                     <div class="form-group">
-                        <label class="control-label col-sm-3">{{ 'label.input.minimumactiveperiod' | translate
-                            }}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.minimumactiveperiod' | translate}}"></i>
+                        <label class="control-label col-sm-3">{{ 'label.input.minimumactiveperiod' | translate }}
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.minimumactiveperiod' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="minimumactiveperiod" type="text" name="minimumactiveperiod" class="form-control"
                                    number-format ng-model="formData.minimumActivePeriodForDividends" late-validate number=true>
@@ -231,10 +229,9 @@
                     </div>
 
                     <div class="form-group">
-                        <label class="control-label col-sm-3">{{ 'label.input.lockinPeriodFrequency' | translate
-                            }}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.shareproductlockinPeriodFrequency' | translate}}"></i>
+                        <label class="control-label col-sm-3">{{ 'label.input.lockinPeriodFrequency' | translate }}
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.shareproductlockinPeriodFrequency' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="lockinPeriodFrequency" type="text" name="lockinPeriodFrequency" class="form-control"
                                    ng-model="formData.lockinPeriodFrequency" late-validate number=true>
@@ -252,10 +249,9 @@
                     </div>
 
                     <div class="form-group">
-                        <label class="control-label col-sm-3">{{ 'label.input.allowdividendsforinactiveclients' |
-                            translate }}</label>
-                        <i class="fa fa-question-circle col-sm-1"
-                           uib-tooltip="{{'label.tooltip.shareproductallowdividends' | translate}}"></i>
+                        <label class="control-label col-sm-3">{{ 'label.input.allowdividendsforinactiveclients' | translate }}
+                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.shareproductallowdividends' | translate}}" tooltip-append-to-body="true"></i>
+                        </label>
                         <div class="col-sm-2">
                             <input id="withdrawalFeeForTransfers" type="checkbox"
                                    ng-model="formData.allowDividendCalculationForInactiveClients">
@@ -277,10 +273,9 @@
                     <hr>
 
                     <div class="form-group">
-                        <div class="col-sm-2">
+                        <div class="col-sm-3">
                             <label class="bolder">{{'label.input.marketpriceperiods' | translate}}
-                                &nbsp;<i class="fa fa-question-circle"
-                                         uib-tooltip="{{'label.tooltip.marketpriceaddition' | translate}}"></i>
+                                &nbsp;<i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.marketpriceaddition' | translate}}" tooltip-append-to-body="true"></i>
                             </label>
                         </div>
                         <div class="col-sm-1">
@@ -293,11 +288,9 @@
                     <table class="table width50">
                         <tr class="graybg" class="width50">
                             <th>{{'label.heading.fromdate' | translate}}
-                                &nbsp;<i class="fa fa-question-circle"
-                                         uib-tooltip="{{'label.tooltip.marketpricestartdate' | translate}}"></i></th>
+                                &nbsp;<i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.marketpricestartdate' | translate}}" tooltip-append-to-body="true"></i></th>
                             <th>{{'label.heading.sharenominalprice' | translate}}
-                                &nbsp;<i class="fa fa-question-circle"
-                                         uib-tooltip="{{'label.tooltip.marketprice' | translate}}"></i></th>
+                                &nbsp;<i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.marketprice' | translate}}" tooltip-append-to-body="true"></i></th>
                             <th> {{'label.heading.actions' | translate}}</th>
                         </tr>
                         <tr ng-repeat="marketpriceperiod in formData.marketPricePeriods">
@@ -406,9 +399,9 @@
                     <div class="col-md-12" ng-show="formData.accountingRule==2">
                         <div class="form-group">
                             <h4>{{"label.heading.assets" | translate}}</h4>
-                            <label class="control-label col-sm-2">{{ 'label.input.sharereference' | translate }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.sharereference' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.sharereference' | translate }}
+                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.sharereference' | translate}}" tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="shareReferenceId" ng-model="formData.shareReferenceId"
                                         chosen="assetAccountOptions"
@@ -421,9 +414,9 @@
                         <hr>
                         <div class="form-group">
                             <h4>{{"label.heading.liabilities" | translate}}</h4>
-                            <label class="control-label col-sm-2">{{ 'label.input.sharecontrol' | translate }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.sharecontrol' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.sharecontrol' | translate }}
+                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.sharecontrol' | translate}}" tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="shareSuspenseId" ng-model="formData.shareSuspenseId"
                                         chosen="liabilityAccountOptions"
@@ -436,9 +429,9 @@
                         <hr>
                         <div class="form-group">
                             <h4>{{"label.heading.shareequity" | translate}}</h4>
-                            <label class="control-label col-sm-2">{{ 'label.input.equity' | translate }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.equityaccount' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.equity' | translate }}
+                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.equityaccount' | translate}}" tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="shareEquityId" ng-model="formData.shareEquityId"
                                         chosen="equityAccountOptions"
@@ -451,9 +444,9 @@
                         <hr>
                         <div class="form-group">
                             <h4>{{"label.heading.income" | translate}}</h4>
-                            <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}</label>
-                            <i class="fa fa-question-circle col-sm-1 "
-                               uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}"></i>
+                            <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}
+                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}" tooltip-append-to-body="true"></i>
+                            </label>
                             <div class="col-sm-3">
                                 <select id="incomeFromFeeAccountId" ng-model="formData.incomeFromFeeAccountId"
                                         chosen="incomeAccountOptions"
diff --git a/app/views/products/editfixeddepositproduct.html b/app/views/products/editfixeddepositproduct.html
index 9ee1596d..dfd7bedf 100755
--- a/app/views/products/editfixeddepositproduct.html
+++ b/app/views/products/editfixeddepositproduct.html
@@ -242,8 +242,10 @@
     </div>
 </div>
 <div class="form-group">
-    <label class="control-label col-sm-3">{{ 'label.input.withholdtax' | translate }}</label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.withholdtax' | translate}}"></i>
+    <label class="control-label col-sm-3">{{ 'label.input.withholdtax' | translate }}
+        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.withholdtax' | translate}}"
+        tooltip-append-to-body="true"></i>
+    </label>
     <div class="col-sm-2">
         <input id="withHoldTax" type="checkbox" ng-model="formData.withHoldTax" ng-true-value="true"
                ng-false-value="false">
@@ -407,8 +409,10 @@
 <div class="col-md-12" ng-show="formData.accountingRule==2">
     <div class="form-group">
         <h4>{{"label.heading.assets" | translate}}</h4>
-        <label class="control-label col-sm-2">{{ 'label.input.savingreference' | translate }}</label>
-        <i class="fa fa-question-circle col-sm-1 " tooltip="{{'label.tooltip.savingreference' | translate}}"></i>
+        <label class="control-label col-sm-2">{{ 'label.input.savingreference' | translate }}
+            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.savingreference' | translate}}"
+            tooltip-append-to-body="true"></i>
+        </label>
         <div class="col-sm-3">
             <select id="savingsReferenceAccountId" ng-model="formData.savingsReferenceAccountId"
                     chosen="assetAccountOptions"
@@ -420,8 +424,10 @@
     <hr>
     <div class="form-group">
         <h4>{{"label.heading.liabilities" | translate}}</h4>
-        <label class="control-label col-sm-2">{{ 'label.input.savingcontrol' | translate }}</label>
-        <i class="fa fa-question-circle col-sm-1 " tooltip="{{'label.tooltip.savingcontrol' | translate}}"></i>
+        <label class="control-label col-sm-2">{{ 'label.input.savingcontrol' | translate }}
+            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.savingcontrol' | translate}}"
+            tooltip-append-to-body="true"></i>
+        </label>
         <div class="col-sm-3">
             <select id="savingsControlAccountId" ng-model="formData.savingsControlAccountId"
                     chosen="liabilityAccountOptions"
@@ -429,8 +435,10 @@
                     value="{{liabilityAccount.id}}">
             </select>
         </div>
-        <label class="control-label col-sm-2">{{ 'label.input.savingstransfersinsuspenpense' | translate }}</label>
-        <i class="fa fa-question-circle col-sm-1 " tooltip="{{'label.tooltip.savingsuspense' | translate}}"></i>
+        <label class="control-label col-sm-2">{{ 'label.input.savingstransfersinsuspenpense' | translate }}
+            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.savingsuspense' | translate}}"
+            tooltip-append-to-body="true"></i>
+        </label>
         <div class="col-sm-3">
             <select id="transfersInSuspenseAccountId" ng-model="formData.transfersInSuspenseAccountId"
                     chosen="liabilityAccountOptions"
@@ -442,8 +450,10 @@
     <hr>
     <div class="form-group">
         <h4>{{"label.heading.expenses" | translate}}</h4>
-        <label class="control-label col-sm-2">{{ 'label.input.interestonsavings' | translate }}</label>
-        <i class="fa fa-question-circle col-sm-1 " tooltip="{{'label.tooltip.interestonsavings' | translate}}"></i>
+        <label class="control-label col-sm-2">{{ 'label.input.interestonsavings' | translate }}
+            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.interestonsavings' | translate}}"
+            tooltip-append-to-body="true"></i>
+        </label>
         <div class="col-sm-3">
             <select id="interestOnSavingsAccountId" ng-model="formData.interestOnSavingsAccountId"
                     chosen="expenseAccountOptions"
@@ -455,8 +465,10 @@
     <hr>
     <div class="form-group">
         <h4>{{"label.heading.income" | translate}}</h4>
-        <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}</label>
-        <i class="fa fa-question-circle col-sm-1 " tooltip="{{'label.tooltip.incomefromfees' | translate}}"></i>
+        <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}
+            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}"
+            tooltip-append-to-body="true"></i>
+        </label>
         <div class="col-sm-3">
             <select id="incomeFromFeeAccountId" ng-model="formData.incomeFromFeeAccountId"
                     chosen="incomeAccountOptions"
@@ -464,8 +476,10 @@
                     value="{{incomeAccount.id}}">
             </select>
         </div>
-        <label class="control-label col-sm-2">{{ 'label.input.incomefrompenalties' | translate }}</label>
-        <i class="fa fa-question-circle col-sm-1 " tooltip="{{'label.tooltip.incomefrompenalties' | translate}}"></i></a>
+        <label class="control-label col-sm-2">{{ 'label.input.incomefrompenalties' | translate }}
+            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.incomefrompenalties' | translate}}"
+            tooltip-append-to-body="true"></i>
+        </label>
         <div class="col-sm-3">
             <select id="incomeFromPenaltyAccountId" ng-model="formData.incomeFromPenaltyAccountId"
                     chosen="incomeAccountOptions"
diff --git a/app/views/products/editloanproduct.html b/app/views/products/editloanproduct.html
index 5f6fd54d..64191ef3 100755
--- a/app/views/products/editloanproduct.html
+++ b/app/views/products/editloanproduct.html
@@ -974,16 +974,18 @@
 	<div class="col-md-12" ng-show="isAccountingEnabled()">
 	<div class="form-group">
 	    <h4>{{"label.heading.assets" | translate}}</h4>
-	    <label class="control-label col-sm-2">{{ 'label.input.fundsource' | translate }}</label>
-	    <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.fundsource' | translate}}"></i>
+	    <label class="control-label col-sm-2">{{ 'label.input.fundsource' | translate }}
+	        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.fundsource' | translate}}" tooltip-append-to-body="true"></i>
+	    </label>
 	    <div class="col-sm-3">
 	        <select id="fundSourceAccountId" ng-model="formData.fundSourceAccountId" chosen="assetAccountOptions"
 	                ng-options="assetAccount.id as assetAccount.name for assetAccount in assetAccountOptions"
 	                value="{{assetAccount.id}}">
 	        </select>
 	    </div>
-	    <label class="control-label col-sm-2">{{ 'label.input.loanportfolio' | translate }}</label>
-	    <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.loanportfolio' | translate}}"></i></a>
+	    <label class="control-label col-sm-2">{{ 'label.input.loanportfolio' | translate }}
+	        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.loanportfolio' | translate}}" tooltip-append-to-body="true"></i>
+	    </label>
 	    <div class="col-sm-3">
 	        <select id="loanPortfolioAccountId" class="form-control" ng-model="formData.loanPortfolioAccountId"
 	                chosen="assetAccountOptions"
@@ -993,8 +995,9 @@
 	    </div>
 	</div>
 	<div class="form-group" ng-show="isAccrualAccountingEnabled()">
-	    <label class="control-label col-sm-2">{{ 'label.input.receivableinterest' | translate }}</label>
-	    <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.receivableinterest' | translate}}"></i>
+	    <label class="control-label col-sm-2">{{ 'label.input.receivableinterest' | translate }}
+	        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.receivableinterest' | translate}}" tooltip-append-to-body="true"></i>
+	    </label>
 	    <div class="col-sm-3">
 	        <select id="receivableInterestAccountId" class="form-control"
 	                ng-model="formData.receivableInterestAccountId" chosen="assetAccountOptions"
@@ -1002,8 +1005,9 @@
 	                value="{{assetAccount.id}}">
 	        </select>
 	    </div>
-	    <label class="control-label col-sm-2">{{ 'label.input.receivablefees' | translate }}</label>
-	    <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.receivablefees' | translate}}"></i></a>
+	    <label class="control-label col-sm-2">{{ 'label.input.receivablefees' | translate }}
+	        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.receivablefees' | translate}}" tooltip-append-to-body="true"></i>
+	    </label>
 	    <div class="col-sm-3">
 	        <select id="receivableFeeAccountId" ng-model="formData.receivableFeeAccountId"
 	                chosen="assetAccountOptions"
@@ -1013,8 +1017,9 @@
 	    </div>
 	</div>
 	<div class="form-group" ng-show="isAccrualAccountingEnabled()">
-	    <label class="control-label col-sm-2">{{ 'label.input.receivablepenalties' | translate }}</label>
-	    <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.receivablepenalties' | translate}}"></i>
+	    <label class="control-label col-sm-2">{{ 'label.input.receivablepenalties' | translate }}
+	        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.receivablepenalties' | translate}}" tooltip-append-to-body="true"></i>
+	    </label>
 	    <div class="col-sm-3">
 	        <select id="receivablePenaltyAccountId" ng-model="formData.receivablePenaltyAccountId"
 	                chosen="assetAccountOptions"
@@ -1024,8 +1029,9 @@
 	    </div>
 	</div>
 	<div class="form-group">
-	    <label class="control-label col-sm-2">{{ 'label.input.transfersinsuspense' | translate }}</label>
-	    <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.transfersinsuspense' | translate}}"></i></a>
+	    <label class="control-label col-sm-2">{{ 'label.input.transfersinsuspense' | translate }}
+	        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.transfersinsuspense' | translate}}" tooltip-append-to-body="true"></i></a>
+	    </label>
 	    <div class="col-sm-3">
 	        <select id="transfersInSuspenseAccountId" ng-model="formData.transfersInSuspenseAccountId"
 	                chosen="assetAccountOptions"
@@ -1037,8 +1043,9 @@
 	<hr>
 	<div class="form-group">
 	    <h4>{{"label.heading.income" | translate}}</h4>
-	    <label class="control-label col-sm-2">{{ 'label.input.incomefrominterest' | translate }}</label>
-	    <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.incomefrominterest' | translate}}"></i>
+	    <label class="control-label col-sm-2">{{ 'label.input.incomefrominterest' | translate }}
+	        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.incomefrominterest' | translate}}" tooltip-append-to-body="true"></i>
+	    </label>
 	    <div class="col-sm-3">
 	        <select id="interestOnLoanAccountId" ng-model="formData.interestOnLoanAccountId"
 	                chosen="incomeAccountOptions"
@@ -1046,8 +1053,9 @@
 	                value="{{incomeAccount.id}}">
 	        </select>
 	    </div>
-	    <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}</label>
-	    <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}"></i></a>
+	    <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}
+	        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}" tooltip-append-to-body="true"></i>
+	    </label>
 	    <div class="col-sm-3">
 	        <select id="incomeFromFeeAccountId" ng-model="formData.incomeFromFeeAccountId"
 	                chosen="incomeAccountOptions"
@@ -1057,8 +1065,9 @@
 	    </div>
 	</div>
 	<div class="form-group">
-	    <label class="control-label col-sm-2">{{ 'label.input.incomefrompenalties' | translate }}</label>
-	    <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.incomefrompenalties' | translate}}"></i>
+	    <label class="control-label col-sm-2">{{ 'label.input.incomefrompenalties' | translate }}
+	        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.incomefrompenalties' | translate}}" tooltip-append-to-body="true"></i>
+	    </label>
 	    <div class="col-sm-3">
 	        <select id="incomeFromPenaltyAccountId" ng-model="formData.incomeFromPenaltyAccountId"
 	                chosen="incomeAccountOptions"
@@ -1066,8 +1075,9 @@
 	                value="{{incomeAccount.id}}">
 	        </select>
 	    </div>
-	    <label class="control-label col-sm-2">{{ 'label.input.recoverypayments' | translate }}</label>
-	    <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.recoverypayments' | translate}}"></i></a>
+	    <label class="control-label col-sm-2">{{ 'label.input.recoverypayments' | translate }}
+	        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.recoverypayments' | translate}}" tooltip-append-to-body="true"></i>
+	    </label>
 	    <div class="col-sm-3">
 	        <select id="incomeFromRecoveryAccountId" ng-model="formData.incomeFromRecoveryAccountId"
 	                chosen="incomeAccountOptions"
@@ -1079,8 +1089,9 @@
 	<hr>
 	<div class="form-group">
 	    <h4>{{"label.heading.expenses" | translate}}</h4>
-	    <label class="control-label col-sm-2">{{ 'label.input.loseswrittenoff' | translate }}</label>
-	    <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.loseswrittenoff' | translate}}"></i>
+	    <label class="control-label col-sm-2">{{ 'label.input.loseswrittenoff' | translate }}
+	        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.loseswrittenoff' | translate}}" tooltip-append-to-body="true"></i>
+	    </label>
 	    <div class="col-sm-3">
 	        <select id="writeOffAccountId" ng-model="formData.writeOffAccountId" chosen="expenseAccountOptions"
 	                ng-options="expenseAccount.id as expenseAccount.name for expenseAccount in expenseAccountOptions"
@@ -1091,8 +1102,9 @@
 	<hr>
 	<div class="form-group">
 	    <h4>{{"label.heading.liabilities" | translate}}</h4>
-	    <label class="control-label col-sm-2">{{ 'label.input.overpaymentliability' | translate }}</label>
-	    <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.overpaymentliability' | translate}}"></i>
+	    <label class="control-label col-sm-2">{{ 'label.input.overpaymentliability' | translate }}
+	        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.overpaymentliability' | translate}}" tooltip-append-to-body="true"></i>
+	    </label>
 	    <div class="col-sm-3">
 	        <select id="overpaymentLiabilityAccountId" ng-model="formData.overpaymentLiabilityAccountId"
 	                chosen="liabilityAccountOptions"
diff --git a/app/views/products/editrecurringdepositproduct.html b/app/views/products/editrecurringdepositproduct.html
index 7cdf216e..232838a4 100755
--- a/app/views/products/editrecurringdepositproduct.html
+++ b/app/views/products/editrecurringdepositproduct.html
@@ -267,8 +267,10 @@
 
 </div>
 <div class="form-group">
-    <label class="control-label col-sm-3">{{ 'label.input.withholdtax' | translate }}</label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.withholdtax' | translate}}"></i>
+    <label class="control-label col-sm-3">{{ 'label.input.withholdtax' | translate }}
+        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.withholdtax' | translate}}"
+        tooltip-append-to-body="true"></i>
+    </label>
     <div class="col-sm-2">
         <input id="withHoldTax" type="checkbox" ng-model="formData.withHoldTax" ng-true-value="true"
                ng-false-value="false">
@@ -455,8 +457,10 @@
 <div class="col-md-12" ng-show="formData.accountingRule==2">
     <div class="form-group">
         <h4>{{"label.heading.assets" | translate}}</h4>
-        <label class="control-label col-sm-2">{{ 'label.input.savingreference' | translate }}</label>
-        <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.savingreference' | translate}}"></i>
+        <label class="control-label col-sm-2">{{ 'label.input.savingreference' | translate }}
+            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.savingreference' | translate}}"
+            tooltip-append-to-body="true"></i>
+        </label>
         <div class="col-sm-3">
             <select id="savingsReferenceAccountId" ng-model="formData.savingsReferenceAccountId"
                     chosen="assetAccountOptions"
@@ -468,8 +472,10 @@
     <hr>
     <div class="form-group">
         <h4>{{"label.heading.liabilities" | translate}}</h4>
-        <label class="control-label col-sm-2">{{ 'label.input.savingcontrol' | translate }}</label>
-        <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.savingcontrol' | translate}}"></i>
+        <label class="control-label col-sm-2">{{ 'label.input.savingcontrol' | translate }}
+            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.savingcontrol' | translate}}"
+            tooltip-append-to-body="true"></i>
+        </label>
         <div class="col-sm-3">
             <select id="savingsControlAccountId" ng-model="formData.savingsControlAccountId"
                     chosen="liabilityAccountOptions"
@@ -477,8 +483,10 @@
                     value="{{liabilityAccount.id}}">
             </select>
         </div>
-        <label class="control-label col-sm-2">{{ 'label.input.savingstransfersinsuspenpense' | translate }}</label>
-        <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.savingsuspense' | translate}}"></i>
+        <label class="control-label col-sm-2">{{ 'label.input.savingstransfersinsuspenpense' | translate }}
+            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.savingsuspense' | translate}}"
+            tooltip-append-to-body="true"></i>
+        </label>
         <div class="col-sm-3">
             <select id="transfersInSuspenseAccountId" ng-model="formData.transfersInSuspenseAccountId"
                     chosen="liabilityAccountOptions"
@@ -490,8 +498,10 @@
     <hr>
     <div class="form-group">
         <h4>{{"label.heading.expenses" | translate}}</h4>
-        <label class="control-label col-sm-2">{{ 'label.input.interestonsavings' | translate }}</label>
-        <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.interestonsavings' | translate}}"></i>
+        <label class="control-label col-sm-2">{{ 'label.input.interestonsavings' | translate }}
+            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.interestonsavings' | translate}}"
+            tooltip-append-to-body="true"></i>
+        </label>
         <div class="col-sm-3">
             <select id="interestOnSavingsAccountId" ng-model="formData.interestOnSavingsAccountId"
                     chosen="expenseAccountOptions"
@@ -503,8 +513,10 @@
     <hr>
     <div class="form-group">
         <h4>{{"label.heading.income" | translate}}</h4>
-        <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}</label>
-        <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}"></i>
+        <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}
+            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}"
+            tooltip-append-to-body="true"></i>
+        </label>
         <div class="col-sm-3">
             <select id="incomeFromFeeAccountId" ng-model="formData.incomeFromFeeAccountId"
                     chosen="incomeAccountOptions"
@@ -512,8 +524,10 @@
                     value="{{incomeAccount.id}}">
             </select>
         </div>
-        <label class="control-label col-sm-2">{{ 'label.input.incomefrompenalties' | translate }}</label>
-        <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.incomefrompenalties' | translate}}"></i></a>
+        <label class="control-label col-sm-2">{{ 'label.input.incomefrompenalties' | translate }}
+            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.incomefrompenalties' | translate}}"
+            tooltip-append-to-body="true"></i>
+        </label>
         <div class="col-sm-3">
             <select id="incomeFromPenaltyAccountId" ng-model="formData.incomeFromPenaltyAccountId"
                     chosen="incomeAccountOptions"
diff --git a/app/views/products/editsavingproduct.html b/app/views/products/editsavingproduct.html
index 5e71756c..71e982af 100755
--- a/app/views/products/editsavingproduct.html
+++ b/app/views/products/editsavingproduct.html
@@ -189,8 +189,9 @@
                 </div>
             </div>
             <div class="form-group">
-                <label class="control-label col-sm-3">{{ 'label.input.withholdtax' | translate }}</label>
-                <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.withholdtax' | translate}}"></i>
+                <label class="control-label col-sm-3">{{ 'label.input.withholdtax' | translate }}
+                    <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.withholdtax' | translate}}" tooltip-append-to-body="true"></i>
+                </label>
                 <div class="col-sm-2">
                     <input id="withHoldTax" type="checkbox" ng-model="formData.withHoldTax" ng-true-value="true"
                            ng-false-value="false">
@@ -287,8 +288,9 @@
 			<div class="col-md-12" ng-show="formData.accountingRule==2">
 		        <div class="form-group">
 		        	<h4>{{"label.heading.assets" | translate}}</h4>
-		            <label class="control-label col-sm-2">{{ 'label.input.savingreference' | translate }}</label>
-	            	<i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.savingreference' | translate}}"></i>
+		            <label class="control-label col-sm-2">{{ 'label.input.savingreference' | translate }}
+	            	    <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.savingreference' | translate}}" tooltip-append-to-body="true"></i>
+		            </label>
 		            <div class="col-sm-3">
 		            	<select id="savingsReferenceAccountId" ng-model="formData.savingsReferenceAccountId"
 	                        chosen="assetAccountOptions"
@@ -296,8 +298,9 @@
 	                        value="{{assetAccount.id}}">
 	                	</select>
 		            </div>
-					<label class="control-label col-sm-2">{{ 'label.input.overdraftportfoliocontrol' | translate }}</label>
-	            	<i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.overdraftprotfolio' | translate}}"></i></a>
+					<label class="control-label col-sm-2">{{ 'label.input.overdraftportfoliocontrol' | translate }}
+	            	    <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.overdraftprotfolio' | translate}}" tooltip-append-to-body="true"></i>
+	            	</label>
 	            	<div class="col-sm-3">
 	            		<select id="overdraftPortfolioControlId" ng-model="formData.overdraftPortfolioControlId"
 	                        chosen="assetAccountOptions"
@@ -309,8 +312,9 @@
 		        <hr>
 		        <div class="form-group">
 		        	<h4>{{"label.heading.liabilities" | translate}}</h4>
-		            <label class="control-label col-sm-2">{{ 'label.input.savingcontrol' | translate }}</label>
-	            	<i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.savingcontrol' | translate}}"></i>
+		            <label class="control-label col-sm-2">{{ 'label.input.savingcontrol' | translate }}
+	            	    <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.savingcontrol' | translate}}" tooltip-append-to-body="true"></i>
+		            </label>
 		            <div class="col-sm-3">
 		            	<select id="savingsControlAccountId" ng-model="formData.savingsControlAccountId"
 	                        chosen="liabilityAccountOptions"
@@ -318,8 +322,9 @@
 	                        value="{{liabilityAccount.id}}">
 	                	</select>
 		            </div>
-            		<label class="control-label col-sm-2">{{ 'label.input.savingstransfersinsuspenpense' | translate }}</label>
-            		<i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.savingsuspense' | translate}}"></i>
+            		<label class="control-label col-sm-2">{{ 'label.input.savingstransfersinsuspenpense' | translate }}
+            		    <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.savingsuspense' | translate}}" tooltip-append-to-body="true"></i>
+	            	</label>
 	            	<div class="col-sm-3">
 	            		<select id="transfersInSuspenseAccountId" ng-model="formData.transfersInSuspenseAccountId"
 	                        chosen="liabilityAccountOptions"
@@ -329,8 +334,9 @@
 	            	</div>	            
 		        </div>
 				<div class="form-group" ng-show="formData.isDormancyTrackingActive">
-					<label class="control-label col-sm-2">{{ 'label.input.escheatLiability' | translate }}</label>
-					<i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.escheatLiability' | translate}}"></i>
+					<label class="control-label col-sm-2">{{ 'label.input.escheatLiability' | translate }}
+					    <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.escheatLiability' | translate}}" tooltip-append-to-body="true"></i>
+					</label>
 					<div class="col-sm-3">
 						<select id="escheatLiabilityId" ng-model="formData.escheatLiabilityId"
 								chosen="liabilityAccountOptions"
@@ -342,8 +348,9 @@
 		        <hr>
 		        <div class="form-group">
 		        	<h4>{{"label.heading.expenses" | translate}}</h4>
-            		<label class="control-label col-sm-2">{{ 'label.input.interestonsavings' | translate }}</label>
-            		<i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.interestonsavings' | translate}}"></i>
+            		<label class="control-label col-sm-2">{{ 'label.input.interestonsavings' | translate }}
+            		    <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.interestonsavings' | translate}}" tooltip-append-to-body="true"></i>
+		            </label>
 		            <div class="col-sm-3">
 		            	<select id="interestOnSavingsAccountId" ng-model="formData.interestOnSavingsAccountId"
 	                        chosen="expenseAccountOptions"
@@ -351,8 +358,9 @@
 	                        value="{{expenseAccount.id}}">
 		                </select>
 		            </div>
-					<label class="control-label col-sm-2">{{ 'label.input.writeOff' | translate }}</label>
-	            	<i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.Writeoffoverdraft' | translate}}"></i></a>
+					<label class="control-label col-sm-2">{{ 'label.input.writeOff' | translate }}
+	            	    <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.Writeoffoverdraft' | translate}}" tooltip-append-to-body="true"></i>
+	            	</label>
 	            	<div class="col-sm-3">
 	            		<select id="writeOffAccountId" ng-model="formData.writeOffAccountId" chosen="expenseAccountOptions"
 	                        ng-options="expenseAccount.id as expenseAccount.name for expenseAccount in expenseAccountOptions"
@@ -363,8 +371,9 @@
 		        <hr>
 		        <div class="form-group">
 		        	<h4>{{"label.heading.income" | translate}}</h4>
-		            <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}</label>
-	            	<i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}"></i>
+		            <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}
+	            	    <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}" tooltip-append-to-body="true"></i>
+		            </label>
 		            <div class="col-sm-3">
 		            	<select id="incomeFromFeeAccountId" ng-model="formData.incomeFromFeeAccountId"
 	                        chosen="incomeAccountOptions"
@@ -372,8 +381,9 @@
 	                        value="{{incomeAccount.id}}">
 		                </select>
 		            </div>
-					<label class="control-label col-sm-2">{{ 'label.input.incomefrompenalties' | translate }}</label>
-	            	<i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.incomefrompenalties' | translate}}"></i></a>
+					<label class="control-label col-sm-2">{{ 'label.input.incomefrompenalties' | translate }}
+	            	    <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.incomefrompenalties' | translate}}" tooltip-append-to-body="true"></i>
+	            	</label>
 	            	<div class="col-sm-3">
 	            		<select id="incomeFromPenaltyAccountId" ng-model="formData.incomeFromPenaltyAccountId"
 	                        chosen="incomeAccountOptions"
@@ -383,8 +393,9 @@
 	            	</div>	            
 		        </div>
 		        <div class="form-group">
-		            <label class="control-label col-sm-2">{{ 'label.input.interest.on.overdrafts' | translate }}</label>
-	            	<i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.incomefromoverdraftinterest' | translate}}"></i>
+		            <label class="control-label col-sm-2">{{ 'label.input.interest.on.overdrafts' | translate }}
+	            	    <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.incomefromoverdraftinterest' | translate}}" tooltip-append-to-body="true"></i>
+		            </label>
 		            <div class="col-sm-3">
 		            	<select id="incomeFromInterestId" ng-model="formData.incomeFromInterestId" chosen="incomeAccountOptions"
 	                        ng-options="incomeAccount.id as incomeAccount.name for incomeAccount in incomeAccountOptions"
diff --git a/app/views/products/editshareproduct.html b/app/views/products/editshareproduct.html
index b2e6d9c2..d0cc6b2f 100644
--- a/app/views/products/editshareproduct.html
+++ b/app/views/products/editshareproduct.html
@@ -10,8 +10,10 @@
 <h3>{{ 'label.heading.details' | translate }}</h3>
 <hr>
 <div class="form-group">
-    <label class="control-label col-sm-2">{{ 'label.input.productname' | translate }}<span class="required">*</span></label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.shareproductname' | translate}}"></i>
+    <label class="control-label col-sm-2">{{ 'label.input.productname' | translate }}
+        <span class="required">*</span>
+        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.shareproductname' | translate}}" tooltip-append-to-body="true"></i>
+    </label>
     <div class="col-sm-3">
         <input ng-autofocus="true" id="name" class="form-control" name="name" type="text" ng-model="formData.name"
                required late-validate/>
@@ -21,8 +23,10 @@
     </div>
 </div>
 <div class="form-group">
-    <label class="control-label col-sm-2">{{ 'label.input.product.shortname' | translate }}<span class="required">*</span></label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.shareproductshortname' | translate}}"></i>
+    <label class="control-label col-sm-2">{{ 'label.input.product.shortname' | translate }}
+        <span class="required">*</span>
+        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.shareproductshortname' | translate}}" tooltip-append-to-body="true"></i>
+    </label>
     <div class="col-sm-3">
         <input type="text" id="shortName" name="shortName" class="form-control" ng-model="formData.shortName"
                maxlength="4" required late-validate/>
@@ -32,8 +36,10 @@
     </div>
 </div>
 <div class="form-group">
-    <label class="control-label col-sm-2">{{ 'label.input.description' | translate }}<span class="required">*</span></label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.shareproductdescription' | translate}}"></i>
+    <label class="control-label col-sm-2">{{ 'label.input.description' | translate }}
+        <span class="required">*</span>
+        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.shareproductdescription' | translate}}" tooltip-append-to-body="true"></i>
+    </label>
     <div class="col-sm-3">
         <textarea rows="2" id="description" name="description" class="form-control" ng-model="formData.description"
                   required late-validate/></textarea>
@@ -45,15 +51,19 @@
 <h3>{{ 'label.heading.currency' | translate }}</h3>
 <hr>
 <div class="form-group">
-    <label class="control-label col-sm-2">{{ 'label.input.currency' | translate }}<span class="required">*</span></label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.currency' | translate}}"></i>
+    <label class="control-label col-sm-2">{{ 'label.input.currency' | translate }}
+        <span class="required">*</span>
+        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.currency' | translate}}" tooltip-append-to-body="true"></i>
+    </label>
     <div class="col-sm-2">
         <select id="currencyCode" ng-model="formData.currencyCode" class="form-control"
                 ng-options="currency.code as currency.name for currency in product.currencyOptions"
                 value="{{currency.code}}"/>
     </div>
-    <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.decimalplaces' | translate }}<span class="required">*</span></label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.shareproductdecimalplaces' | translate}}"></i>
+    <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.decimalplaces' | translate }}
+        <span class="required">*</span>
+        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.shareproductdecimalplaces' | translate}}" tooltip-append-to-body="true"></i>
+    </label>
     <div class="col-sm-2">
         <input type="text" id="digitsAfterDecimal" name="decimalplace" class="form-control"
                ng-model="formData.digitsAfterDecimal" required late-validate/>
@@ -63,8 +73,10 @@
     </div>
 </div>
 <div class="form-group">
-    <label class="control-label col-sm-2">{{ 'label.input.multiplesof' | translate }}<span class="required">*</span></label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.multiplesof' | translate}}"></i>
+    <label class="control-label col-sm-2">{{ 'label.input.multiplesof' | translate }}
+        <span class="required">*</span>
+        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.multiplesof' | translate}}" tooltip-append-to-body="true"></i>
+    </label>
     <div class="col-sm-2">
         <input type="text" id="inMultiplesOf" class="form-control" name="multiplesof" ng-model="formData.inMultiplesOf"
                required late-validate/>
@@ -77,8 +89,10 @@
 <h3>{{ 'label.heading.terms' | translate }}</h3>
 <hr>
 <div class="form-group">
-    <label class="control-label col-sm-2">{{ 'label.input.totalnumberofshares' | translate }}<span class="required">*</span></label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.totalshares' | translate}}"></i>
+    <label class="control-label col-sm-2">{{ 'label.input.totalnumberofshares' | translate }}
+        <span class="required">*</span>
+        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.totalshares' | translate}}" tooltip-append-to-body="true"></i>
+    </label>
     <div class="col-sm-2">
         <input id="totalnumberofshares" name="totalnumberofshares"  number-format class="form-control"
                ng-model="formData.totalShares" required late-validate/>
@@ -87,9 +101,9 @@
         <form-validate valattributeform="createshareproductform" valattribute="totalnumberofshares"/>
     </div>
 
-    <label class="control-label col-sm-2">{{ 'label.input.totalsharestobeissue' | translate }}</label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.totalsharestobeissued' | translate}}"></i>
-
+    <label class="control-label col-sm-2">{{ 'label.input.totalsharestobeissue' | translate }}
+        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.totalsharestobeissued' | translate}}" tooltip-append-to-body="true"></i>
+    </label>
     <div class="col-sm-2">
         <input type="text" id="totalsharestobeissued" name="totalsharestobeissued" ng-model="formData.sharesIssued"
                number-format class="form-control"/>
@@ -97,8 +111,10 @@
 </div>
 
 <div class="form-group">
-    <label class="control-label col-sm-2">{{ 'label.input.nominalprice' | translate }}<span class="required">*</span></label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.nominalprice' | translate}}"></i>
+    <label class="control-label col-sm-2">{{ 'label.input.nominalprice' | translate }}
+        <span class="required">*</span>
+        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.nominalprice' | translate}}" tooltip-append-to-body="true"></i>
+    </label>
     <div class="col-sm-2">
         <input id="nominalprice" name="nominalprice"  number-format class="form-control"
                ng-model="formData.unitPrice" required late-validate/>
@@ -107,9 +123,9 @@
         <form-validate valattributeform="createshareproductform" valattribute="nominalprice"/>
     </div>
 
-    <label class="control-label col-sm-2">{{ 'label.input.capitalvalue' | translate }}</label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.capitalvalue' | translate}}"></i>
-
+    <label class="control-label col-sm-2">{{ 'label.input.capitalvalue' | translate }}
+        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.capitalvalue' | translate}}" tooltip-append-to-body="true"></i>
+    </label>
     <div class="col-sm-2">
         <input type="text" id="capitalvalue" name="capitalvaue" ng-model="formData.shareCapital"
                class="form-control" maxlength="4" disabled/>
@@ -121,9 +137,10 @@
 <hr>
 
 <div class="form-group">
-    <label class="control-label col-sm-3">{{ 'label.input.sharesperclient' | translate }}<span class="required">*</span></label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.sharesperclient' | translate}}"></i>
-
+    <label class="control-label col-sm-3">{{ 'label.input.sharesperclient' | translate }}
+        <span class="required">*</span>
+        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.sharesperclient' | translate}}" tooltip-append-to-body="true"></i>
+    </label>
     <div class="col-sm-2">
         <input id="minimumshares" placeholder="{{'label.input.minimum' | translate}}" type="text"
                class="form-control" ng-model="formData.minimumShares" required>
@@ -142,8 +159,9 @@
 </div>
 
 <div class="form-group">
-    <label class="control-label col-sm-3">{{ 'label.input.minimumactiveperiod' | translate }}</label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.minimumactiveperiod' | translate}}"></i>
+    <label class="control-label col-sm-3">{{ 'label.input.minimumactiveperiod' | translate }}
+        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.minimumactiveperiod' | translate}}" tooltip-append-to-body="true"></i>
+    </label>
     <div class="col-sm-2">
         <input id="minimumactiveperiod" type="text" class="form-control"
                number-format ng-model="formData.minimumActivePeriodForDividends">
@@ -160,8 +178,9 @@
 </div>
 
 <div class="form-group">
-    <label class="control-label col-sm-3">{{ 'label.input.lockinPeriodFrequency' | translate }}</label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.shareproductlockinPeriodFrequency' | translate}}"></i>
+    <label class="control-label col-sm-3">{{ 'label.input.lockinPeriodFrequency' | translate }}
+        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.shareproductlockinPeriodFrequency' | translate}}" tooltip-append-to-body="true"></i>
+    </label>
     <div class="col-sm-2">
         <input id="lockinPeriodFrequency" type="text" class="form-control"
                ng-model="formData.lockinPeriodFrequency">
@@ -177,8 +196,9 @@
 </div>
 
 <div class="form-group">
-    <label class="control-label col-sm-3">{{ 'label.input.allowdividendsforinactiveclients' | translate }}</label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.shareproductallowdividends' | translate}}"></i>
+    <label class="control-label col-sm-3">{{ 'label.input.allowdividendsforinactiveclients' | translate }}
+        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.shareproductallowdividends' | translate}}" tooltip-append-to-body="true"></i>
+    </label>
     <div class="col-sm-2">
         <input id="withdrawalFeeForTransfers" type="checkbox" ng-model="formData.allowDividendCalculationForInactiveClients"/>
     </div>
@@ -188,9 +208,9 @@
 <hr>
 
 <div class="form-group">
-    <div class="col-sm-2">
-        <label class="bolder" >{{'label.input.marketpriceperiods' | translate}}
-            &nbsp;<i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.marketpriceaddition' | translate}}"></i>
+    <div class="col-sm-3">
+        <label class="bolder">{{'label.input.marketpriceperiods' | translate}}
+            &nbsp;<i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.marketpriceaddition' | translate}}" tooltip-append-to-body="true"></i>
         </label>
     </div>
     <div class="col-sm-1">
@@ -202,9 +222,9 @@
 <table class="table width50">
     <tr class="graybg" class="width50">
         <th>{{'label.heading.fromdate' | translate}}
-            &nbsp;<i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.marketpricestartdate' | translate}}"></i></th>
+            &nbsp;<i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.marketpricestartdate' | translate}}" tooltip-append-to-body="true"></i></th>
         <th>{{'label.heading.sharenominalprice' | translate}}
-            &nbsp;<i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.marketprice' | translate}}"></i></th>
+            &nbsp;<i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.marketprice' | translate}}" tooltip-append-to-body="true"></i></th>
         <th> {{'label.heading.actions' | translate}}</th>
     </tr>
     <tr ng-repeat="marketpriceperiod in formData.marketPricePeriods">
@@ -285,8 +305,9 @@
     <div class="col-md-12" ng-show="formData.accountingRule==2">
         <div class="form-group">
             <h4>{{"label.heading.assets" | translate}}</h4>
-            <label class="control-label col-sm-2">{{ 'label.input.sharereference' | translate }}</label>
-            <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.sharereference' | translate}}"></i>
+            <label class="control-label col-sm-2">{{ 'label.input.sharereference' | translate }}
+                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.sharereference' | translate}}" tooltip-append-to-body="true"></i>
+            </label>
             <div class="col-sm-3">
                 <select id="shareReferenceId" ng-model="formData.shareReferenceId"
                         chosen="assetAccountOptions"
@@ -298,8 +319,9 @@
         <hr>
         <div class="form-group">
             <h4>{{"label.heading.liabilities" | translate}}</h4>
-            <label class="control-label col-sm-2">{{ 'label.input.sharecontrol' | translate }}</label>
-            <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.sharecontrol' | translate}}"></i>
+            <label class="control-label col-sm-2">{{ 'label.input.sharecontrol' | translate }}
+                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.sharecontrol' | translate}}" tooltip-append-to-body="true"></i>
+            </label>
             <div class="col-sm-3">
                 <select id="savingsControlAccountId" ng-model="formData.shareSuspenseId"
                         chosen="liabilityAccountOptions"
@@ -311,8 +333,9 @@
         <hr>
         <div class="form-group">
             <h4>{{"label.heading.shareequity" | translate}}</h4>
-            <label class="control-label col-sm-2">{{ 'label.input.equity' | translate }}</label>
-            <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.equityaccount' | translate}}"></i>
+            <label class="control-label col-sm-2">{{ 'label.input.equity' | translate }}
+                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.equityaccount' | translate}}" tooltip-append-to-body="true"></i>
+            </label>
             <div class="col-sm-3">
                 <select id="interestOnSavingsAccountId" ng-model="formData.shareEquityId"
                         chosen="equityAccountOptions"
@@ -324,8 +347,9 @@
         <hr>
         <div class="form-group">
             <h4>{{"label.heading.income" | translate}}</h4>
-            <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}</label>
-            <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}"></i>
+            <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}
+                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}" tooltip-append-to-body="true"></i>
+            </label>
             <div class="col-sm-3">
                 <select id="incomeFromFeeAccountId" ng-model="formData.incomeFromFeeAccountId"
                         chosen="incomeAccountOptions"