diff --git a/public/css/custom.css b/public/css/custom.css
index 411d3b6b3..eab89c790 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -55,6 +55,12 @@ button:focus
 }
 /*--------Cursor Pointer Finish--------*/
 
+/*--------Cursor Default--------*/
+.cursor-default
+{
+    cursor: default !important;
+}
+/*--------Cursor Default Finish--------*/
 
 /*--------Table Head Search--------*/
 .table-header-search
diff --git a/public/css/element.css b/public/css/element.css
index 2dbdd87ec..4408f90c6 100644
--- a/public/css/element.css
+++ b/public/css/element.css
@@ -6239,11 +6239,11 @@
 
 .el-tooltip__popper.is-light {
     background: #FFF;
-    border: 1px solid #303133
+    border: 1px solid #FFF
 }
 
 .el-tooltip__popper.is-light[x-placement^=top] .popper__arrow {
-    border-top-color: #303133
+    border-top-color: #FFF
 }
 
 .el-tooltip__popper.is-light[x-placement^=top] .popper__arrow::after {
@@ -6251,7 +6251,7 @@
 }
 
 .el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow {
-    border-bottom-color: #303133
+    border-bottom-color: #FFF
 }
 
 .el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow::after {
@@ -6259,7 +6259,7 @@
 }
 
 .el-tooltip__popper.is-light[x-placement^=left] .popper__arrow {
-    border-left-color: #303133
+    border-left-color: #FFF
 }
 
 .el-tooltip__popper.is-light[x-placement^=left] .popper__arrow::after {
@@ -6267,7 +6267,7 @@
 }
 
 .el-tooltip__popper.is-light[x-placement^=right] .popper__arrow {
-    border-right-color: #303133
+    border-right-color: #FFF
 }
 
 .el-tooltip__popper.is-light[x-placement^=right] .popper__arrow::after {
diff --git a/resources/assets/js/views/common/dashboard.js b/resources/assets/js/views/common/dashboard.js
index d02c317a6..af2ba0e55 100644
--- a/resources/assets/js/views/common/dashboard.js
+++ b/resources/assets/js/views/common/dashboard.js
@@ -14,15 +14,16 @@ import {getQueryVariable} from './../../plugins/functions';
 import AkauntingDashboard from './../../components/AkauntingDashboard';
 import AkauntingWidget from './../../components/AkauntingWidget';
 
-import {DatePicker} from 'element-ui';
+import {DatePicker, Tooltip} from 'element-ui';
 
-Vue.use(DatePicker);
+Vue.use(DatePicker, Tooltip);
 
 const dashboard = new Vue({
     el: '#main-body',
 
     components: {
         [DatePicker.name]: DatePicker,
+        [Tooltip.name]: Tooltip,
         AkauntingDashboard,
         AkauntingWidget
     },
@@ -51,6 +52,7 @@ const dashboard = new Vue({
                 sort: 0,
             },
             filter_date: [],
+
         };
     },
 
diff --git a/resources/assets/js/views/portal/dashboard.js b/resources/assets/js/views/portal/dashboard.js
index f1b4f5619..d7a4e4989 100644
--- a/resources/assets/js/views/portal/dashboard.js
+++ b/resources/assets/js/views/portal/dashboard.js
@@ -11,12 +11,17 @@ import Vue from 'vue';
 
 import Global from './../../mixins/global';
 
-import Form from './../../plugins/form';
-import BulkAction from './../../plugins/bulk-action';
+import {Tooltip} from 'element-ui';
+
+Vue.use(Tooltip);
 
 const app = new Vue({
     el: '#app',
 
+    components: {
+        [Tooltip.name]: Tooltip,
+    },
+
     mixins: [
         Global
     ],
diff --git a/resources/views/portal/dashboard/index.blade.php b/resources/views/portal/dashboard/index.blade.php
index 9c718e68d..561b23657 100644
--- a/resources/views/portal/dashboard/index.blade.php
+++ b/resources/views/portal/dashboard/index.blade.php
@@ -20,11 +20,18 @@
                         </div>
                     </div>
                 </div>
-                <div class="card-footer">
-                    <div class="progress progress-xs mb-0"  data-toggle="tooltip" data-placement="top" title="{{ $progress['total'] }} / {{ $progress['unpaid'] }}">
-                        <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['unpaid'] : '0' }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['unpaid'] : '0' }}%"></div>
+                <el-tooltip
+                content="{{ $progress['total'] }} / {{ $progress['unpaid'] }}"
+                effect="light"
+                :open-delay="200"
+                placement="top"
+                popper-class="text-dark">
+                    <div class="card-footer">
+                        <div class="progress progress-xs mb-0">
+                            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['unpaid'] : '0' }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['unpaid'] : '0' }}%"></div>
+                        </div>
                     </div>
-                </div>
+                </el-tooltip>
             </div>
         </div>
 
@@ -44,11 +51,18 @@
                         </div>
                     </div>
                 </div>
-                <div class="card-footer">
-                    <div class="progress progress-xs mb-0" data-toggle="tooltip" data-placement="top" title="{{ $progress['total'] }} / {{ $progress['paid'] }}">
-                        <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['paid'] : '0' }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['paid'] : '0' }}%"></div>
+                <el-tooltip
+                content="{{ $progress['total'] }} / {{ $progress['paid'] }}"
+                effect="light"
+                :open-delay="200"
+                placement="top"
+                popper-class="text-dark">
+                    <div class="card-footer">
+                        <div class="progress progress-xs mb-0">
+                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['paid'] : '0' }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['paid'] : '0' }}%"></div>
+                        </div>
                     </div>
-                </div>
+                </el-tooltip>
             </div>
         </div>
 
@@ -68,11 +82,18 @@
                         </div>
                     </div>
                 </div>
-                <div class="card-footer">
-                    <div class="progress progress-xs mb-0" data-toggle="tooltip" data-placement="top" title="{{ $progress['total'] }} / {{ $progress['overdue'] }}">
-                        <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['overdue'] : '0' }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['overdue'] : '0' }}%"></div>
+                <el-tooltip
+                content="{{ $progress['total'] }} / {{ $progress['overdue'] }}"
+                effect="light"
+                :open-delay="200"
+                placement="top"
+                popper-class="text-dark">
+                    <div class="card-footer">
+                        <div class="progress progress-xs mb-0">
+                            <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['overdue'] : '0' }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['overdue'] : '0' }}%"></div>
+                        </div>
                     </div>
-                </div>
+                </el-tooltip>
             </div>
         </div>
 
@@ -92,18 +113,25 @@
                         </div>
                     </div>
                 </div>
-                <div class="card-footer">
-                    <div class="progress progress-xs mb-0"  data-toggle="tooltip" data-placement="top" title="{{ $progress['total'] }} / {{ $progress['partially_paid'] }}">
-                        <div class="progress-bar bg-info" role="progressbar" aria-valuenow="{{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['partially_paid'] : '0' }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['partially_paid'] : '0' }}%"></div>
+                <el-tooltip
+                content="{{ $progress['total'] }} / {{ $progress['partially_paid'] }}"
+                effect="light"
+                :open-delay="200"
+                placement="top"
+                popper-class="text-dark">
+                    <div class="card-footer">
+                        <div class="progress progress-xs mb-0">
+                            <div class="progress-bar bg-info" role="progressbar" aria-valuenow="{{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['partially_paid'] : '0' }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['partially_paid'] : '0' }}%"></div>
+                        </div>
                     </div>
-                </div>
+                </el-tooltip>
             </div>
         </div>
 
         <div class="col-md-12">
             <div class="card">
                 <div class="card-header">
-                    <h4 class="mb-0">{{ trans('dashboard.cash_flow') }}</h4>
+                    <h4 class="mb-0">{{ trans('widgets.cash_flow') }}</h4>
                 </div>
                 <div class="card-body pt-0" id="chart">
                     {!! $chart->container() !!}
@@ -116,3 +144,7 @@
 @push('body_js')
     {!! $chart->script() !!}
 @endpush
+
+@push('scripts_start')
+    <script src="{{ asset('public/js/portal/dashboard.js?v=' . version('short')) }}"></script>
+@endpush
diff --git a/resources/views/widgets/total_expenses.blade.php b/resources/views/widgets/total_expenses.blade.php
index 21128a0c7..130f58b8a 100644
--- a/resources/views/widgets/total_expenses.blade.php
+++ b/resources/views/widgets/total_expenses.blade.php
@@ -16,9 +16,16 @@
                 </div>
             </div>
 
-            <p class="mt-3 mb-0 text-sm"  title="{{ trans('widgets.open_bills') }}: {{ $totals['open'] }}<br>{{ trans('widgets.overdue_bills') }}: {{ $totals['overdue'] }}" data-toggle="tooltip" data-html="true">
+            <p class="mt-3 mb-0 text-sm cursor-default">
                 <span class="text-white">{{ trans('widgets.payables') }}</span>
-                <span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
+                <el-tooltip
+                content="{{ trans('widgets.open_bills') }}: {{ $totals['open'] }} / {{ trans('widgets.overdue_bills') }}: {{ $totals['overdue'] }}"
+                effect="light"
+                :open-delay="200"
+                placement="top"
+                popper-class="text-dark">
+                    <span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
+                </el-tooltip>
             </p>
         </div>
     </div>
diff --git a/resources/views/widgets/total_income.blade.php b/resources/views/widgets/total_income.blade.php
index 360924241..9826e956d 100644
--- a/resources/views/widgets/total_income.blade.php
+++ b/resources/views/widgets/total_income.blade.php
@@ -16,10 +16,17 @@
                 </div>
             </div>
 
-            <p class="mt-3 mb-0 text-sm" title="{{ trans('widgets.open_invoices') }}: {{ $totals['open'] }}<br>{{ trans('widgets.overdue_invoices') }}: {{ $totals['overdue'] }}" data-toggle="tooltip" data-html="true">
-                <span class="text-white">{{ trans('widgets.receivables') }}</span>
-                <span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
-            </p>
+                <p class="mt-3 mb-0 text-sm cursor-default">
+                    <span class="text-white">{{ trans('widgets.receivables') }}</span>
+                    <el-tooltip
+                    content="{{ trans('widgets.open_invoices') }}: {{ $totals['open'] }} / {{ trans('widgets.overdue_invoices') }}: {{ $totals['overdue'] }}"
+                    effect="light"
+                    :open-delay="200"
+                    placement="top"
+                    popper-class="text-dark">
+                        <span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
+                    </el-tooltip>
+                </p>
         </div>
     </div>
 </div>
diff --git a/resources/views/widgets/total_profit.blade.php b/resources/views/widgets/total_profit.blade.php
index c2a59c0df..a428a6ce8 100644
--- a/resources/views/widgets/total_profit.blade.php
+++ b/resources/views/widgets/total_profit.blade.php
@@ -16,9 +16,16 @@
                 </div>
             </div>
 
-            <p class="mt-3 mb-0 text-sm" title="{{ trans('widgets.open_profit') }}: {{ $totals['open'] }}<br>{{ trans('widgets.overdue_profit') }}: {{ $totals['overdue'] }}" data-toggle="tooltip" data-html="true">
+            <p class="mt-3 mb-0 text-sm cursor-default">
                 <span class="text-white">{{ trans('general.upcoming') }}</span>
-                <span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
+                <el-tooltip
+                content="{{ trans('widgets.open_profit') }}: {{ $totals['open'] }} / {{ trans('widgets.overdue_profit') }}: {{ $totals['overdue'] }}"
+                effect="light"
+                :open-delay="200"
+                placement="top"
+                popper-class="text-dark">
+                    <span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
+                </el-tooltip>
             </p>
         </div>
     </div>