diff --git a/resources/assets/less/overrides.less b/resources/assets/less/overrides.less
index 8084edb2dc..2a101dbd98 100644
--- a/resources/assets/less/overrides.less
+++ b/resources/assets/less/overrides.less
@@ -1234,3 +1234,11 @@ caption.tableCaption {
   margin-left: -47px;
   margin-top: 2px;
 }
+.popover.help-popover,
+.popover.help-popover .popover-content,
+.popover.help-popover .popover-body,
+.popover.help-popover .popover-title,
+.popover.help-popover .popover-header {
+  color: #000;
+}
+
diff --git a/resources/views/partials/more-info.blade.php b/resources/views/partials/more-info.blade.php
index ee01f58fb2..5e61f593e0 100644
--- a/resources/views/partials/more-info.blade.php
+++ b/resources/views/partials/more-info.blade.php
@@ -1,4 +1,6 @@
-<a style="padding-left: 5px; font-size: 15px;" class="text-dark-gray hidden-print" data-trigger="focus" tabindex="0" role="button" data-toggle="popover" title="{{ trans('general.more_info') }}" data-placement="right" data-html="true" data-content="{{ (isset($helpText)) ? $helpText : 'Help Info Missing'  }}">
+<a style="padding-left: 5px; font-size: 15px;" class="text-dark-gray hidden-print" data-trigger="focus" tabindex="0" role="button" data-toggle="popover"  data-container="body"
+   data-template="<div class='popover help-popover' role='tooltip'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content popover-body'></div></div>"
+   title="{{ trans('general.more_info') }}" data-placement="right" data-html="true" data-content="{{ (isset($helpText)) ? $helpText : 'Help Info Missing'  }}">
     <x-icon type="more-info" style="padding-top: 9px;" />
     <span class="sr-only">{{ trans('general.moreinfo') }}</span>
 </a>