diff --git a/jero-web/src/components/tools/HeaderNotice.vue b/jero-web/src/components/tools/HeaderNotice.vue
index 835c6d99a..57eec24e9 100644
--- a/jero-web/src/components/tools/HeaderNotice.vue
+++ b/jero-web/src/components/tools/HeaderNotice.vue
@@ -31,7 +31,7 @@
       </a-spin>
     </template>
     <span @click="fetchNotice" class="header-notice">
-      <a-tooltip placement="bottomRight" :title="$t('MessageCenter')">
+      <a-tooltip placement="bottomRight" :title="$t('MessageCenter')" overlayClassName="tooltipColor">
       <a-badge :count="msgTotal">
         <a-icon style="font-size: 16px; padding: 4px" type="bell"/>
       </a-badge>
@@ -262,6 +262,14 @@
   .tabs .ant-tabs-nav .ant-tabs-tab-active {
     color: #000F16 !important;
   }
+
+  .tooltipColor .ant-tooltip-inner {
+    color: #333;
+    background-color: #fff !important;
+  }
+  .tooltipColor .ant-tooltip-arrow::before {
+    background-color: #fff;
+  }
 </style>
 <style lang="less" scoped>
   .header-notice {
diff --git a/jero-web/src/components/tools/UserMenu.vue b/jero-web/src/components/tools/UserMenu.vue
index 63059fb63..5b1a81350 100644
--- a/jero-web/src/components/tools/UserMenu.vue
+++ b/jero-web/src/components/tools/UserMenu.vue
@@ -33,7 +33,7 @@
     <!--    </span>-->
     <div class="action" @click="Jumpflybook">
       <span  class="header-notice">
-         <a-tooltip placement="bottomRight" :title="$t('userManual')">
+         <a-tooltip placement="bottomRight" :title="$t('userManual')" overlayClassName="tooltipColor">
           <a-icon style="font-size: 16px; padding: 4px; color: #000000A6" type="question-circle"/>
            </a-tooltip>
       </span>