diff --git a/app/Traits/Charts.php b/app/Traits/Charts.php
index b181cc1f0..e21e2eeda 100644
--- a/app/Traits/Charts.php
+++ b/app/Traits/Charts.php
@@ -71,9 +71,9 @@ trait Charts
                 'position' => 'right',
             ],
             'tooltips' => [
-                'backgroundColor' => '#f5f5f5',
-                'titleFontColor' => '#333',
-                'bodyFontColor' => '#666',
+                'backgroundColor' => '#000000',
+                'titleFontColor' => '#ffffff',
+                'bodyFontColor' => '#e5e5e5',
                 'bodySpacing' => 4,
                 'xPadding' => 12,
                 'mode' => 'nearest',
@@ -95,9 +95,9 @@ trait Charts
     {
         return [
             'tooltips' => [
-                'backgroundColor' => '#f5f5f5',
-                'titleFontColor' => '#333',
-                'bodyFontColor' => '#666',
+                'backgroundColor' => '#000000',
+                'titleFontColor' => '#ffffff',
+                'bodyFontColor' => '#e5e5e5',
                 'bodySpacing' => 4,
                 'YrPadding' => 12,
                 'mode' => 'nearest',
diff --git a/public/css/element.css b/public/css/element.css
index 4408f90c6..d1e718ef4 100644
--- a/public/css/element.css
+++ b/public/css/element.css
@@ -6169,14 +6169,14 @@
 
 .el-tooltip__popper[x-placement^=top] .popper__arrow {
     bottom: -6px;
-    border-top-color: #303133;
+    border-top-color: #000000;
     border-bottom-width: 0
 }
 
 .el-tooltip__popper[x-placement^=top] .popper__arrow::after {
     bottom: 1px;
     margin-left: -5px;
-    border-top-color: #303133;
+    border-top-color: #000000;
     border-bottom-width: 0
 }
 
@@ -6187,14 +6187,14 @@
 .el-tooltip__popper[x-placement^=bottom] .popper__arrow {
     top: -6px;
     border-top-width: 0;
-    border-bottom-color: #303133
+    border-bottom-color: #000000
 }
 
 .el-tooltip__popper[x-placement^=bottom] .popper__arrow::after {
     top: 1px;
     margin-left: -5px;
     border-top-width: 0;
-    border-bottom-color: #303133
+    border-bottom-color: #000000
 }
 
 .el-tooltip__popper[x-placement^=right] {
@@ -6203,14 +6203,14 @@
 
 .el-tooltip__popper[x-placement^=right] .popper__arrow {
     left: -6px;
-    border-right-color: #303133;
+    border-right-color: #000000;
     border-left-width: 0
 }
 
 .el-tooltip__popper[x-placement^=right] .popper__arrow::after {
     bottom: -5px;
     left: 1px;
-    border-right-color: #303133;
+    border-right-color: #000000;
     border-left-width: 0
 }
 
@@ -6221,7 +6221,7 @@
 .el-tooltip__popper[x-placement^=left] .popper__arrow {
     right: -6px;
     border-right-width: 0;
-    border-left-color: #303133
+    border-left-color: #000000
 }
 
 .el-tooltip__popper[x-placement^=left] .popper__arrow::after {
@@ -6229,11 +6229,11 @@
     bottom: -5px;
     margin-left: -5px;
     border-right-width: 0;
-    border-left-color: #303133
+    border-left-color: #000000
 }
 
 .el-tooltip__popper.is-dark {
-    background: #303133;
+    background: #000000;
     color: #FFF
 }
 
diff --git a/resources/views/portal/dashboard/index.blade.php b/resources/views/portal/dashboard/index.blade.php
index 10284f2aa..cf5de5e5c 100644
--- a/resources/views/portal/dashboard/index.blade.php
+++ b/resources/views/portal/dashboard/index.blade.php
@@ -24,8 +24,7 @@
                 content="{{ $progress['total'] }} / {{ $progress['unpaid'] }}"
                 effect="dark"
                 :open-delay="100"
-                placement="top"
-                popper-class="text-white">
+                placement="top">
                     <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>
@@ -55,8 +54,7 @@
                 content="{{ $progress['total'] }} / {{ $progress['paid'] }}"
                 effect="dark"
                 :open-delay="100"
-                placement="top"
-                popper-class="text-white">
+                placement="top">
                     <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>
@@ -86,8 +84,7 @@
                 content="{{ $progress['total'] }} / {{ $progress['overdue'] }}"
                 effect="dark"
                 :open-delay="100"
-                placement="top"
-                popper-class="text-white">
+                placement="top">
                     <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>
@@ -117,8 +114,7 @@
                 content="{{ $progress['total'] }} / {{ $progress['partially_paid'] }}"
                 effect="dark"
                 :open-delay="100"
-                placement="top"
-                popper-class="text-white">
+                placement="top">
                     <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>
diff --git a/resources/views/widgets/total_expenses.blade.php b/resources/views/widgets/total_expenses.blade.php
index d1ccd5741..caddf5b74 100644
--- a/resources/views/widgets/total_expenses.blade.php
+++ b/resources/views/widgets/total_expenses.blade.php
@@ -22,8 +22,7 @@
                 content="{{ trans('widgets.open_bills') }}: {{ $totals['open'] }} / {{ trans('widgets.overdue_bills') }}: {{ $totals['overdue'] }}"
                 effect="dark"
                 :open-delay="100"
-                placement="top"
-                popper-class="text-white">
+                placement="top">
                     <span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
                 </el-tooltip>
             </p>
diff --git a/resources/views/widgets/total_income.blade.php b/resources/views/widgets/total_income.blade.php
index 0da6149ff..8ac73ec6f 100644
--- a/resources/views/widgets/total_income.blade.php
+++ b/resources/views/widgets/total_income.blade.php
@@ -22,8 +22,7 @@
                 content="{{ trans('widgets.open_invoices') }}: {{ $totals['open'] }} / {{ trans('widgets.overdue_invoices') }}: {{ $totals['overdue'] }}"
                 effect="dark"
                 :open-delay="100"
-                placement="top"
-                popper-class="text-white">
+                placement="top">
                     <span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
                 </el-tooltip>
             </p>
diff --git a/resources/views/widgets/total_profit.blade.php b/resources/views/widgets/total_profit.blade.php
index b1fc2dafe..2a312ff16 100644
--- a/resources/views/widgets/total_profit.blade.php
+++ b/resources/views/widgets/total_profit.blade.php
@@ -22,8 +22,7 @@
                 content="{{ trans('widgets.open_profit') }}: {{ $totals['open'] }} / {{ trans('widgets.overdue_profit') }}: {{ $totals['overdue'] }}"
                 effect="dark"
                 :open-delay="100"
-                placement="top"
-                popper-class="text-white">
+                placement="top">
                     <span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
                 </el-tooltip>
             </p>