diff --git a/web_field_tooltip/static/src/components/field_tooltip/field_tooltip.esm.js b/web_field_tooltip/static/src/components/field_tooltip/field_tooltip.esm.js
index f6eb184bc437..25f804967edc 100644
--- a/web_field_tooltip/static/src/components/field_tooltip/field_tooltip.esm.js
+++ b/web_field_tooltip/static/src/components/field_tooltip/field_tooltip.esm.js
@@ -19,7 +19,8 @@ export class FieldTooltip extends Component {
         this.showAddHelper =
             session.can_manage_tooltips && session.tooltip_show_add_helper;
         this.fieldTooltip = this.props.field.field_tooltip;
-
+        this.colorMode =
+            this.env.services.cookie.current.color_scheme === "dark" ? "dark" : "light";
         if (session.can_manage_tooltips) {
             this.dialogService = useService("dialog");
         }
@@ -30,6 +31,7 @@ export class FieldTooltip extends Component {
         return {
             title: props.field.string,
             help: markup(this.tooltipText),
+            colorMode: this.colorMode,
         };
     }
 
@@ -66,7 +68,6 @@ export class FieldTooltip extends Component {
             {
                 closeOnClickAway: true,
                 position: "top",
-                title: "title",
             }
         );
     }
diff --git a/web_field_tooltip/static/src/components/field_tooltip/field_tooltip.scss b/web_field_tooltip/static/src/components/field_tooltip/field_tooltip.scss
index 0eb4788d24c4..dea2a00ce340 100644
--- a/web_field_tooltip/static/src/components/field_tooltip/field_tooltip.scss
+++ b/web_field_tooltip/static/src/components/field_tooltip/field_tooltip.scss
@@ -18,6 +18,7 @@ sup.field-tooltip {
 
 .popup-div {
     min-width: 100px;
+    max-width: 400px;
     min-height: 30px;
 
     > * {
@@ -32,4 +33,15 @@ sup.field-tooltip {
     .popover-content {
         background-color: white;
     }
+
+    &.popup-dark-mode {
+        .popover-title {
+            font-weight: bold;
+            background-color: #242733;
+        }
+
+        .popover-content {
+            background-color: unset;
+        }
+    }
 }
diff --git a/web_field_tooltip/static/src/components/field_tooltip/field_tooltip.xml b/web_field_tooltip/static/src/components/field_tooltip/field_tooltip.xml
index 4ab68c328e98..47eae35d3279 100644
--- a/web_field_tooltip/static/src/components/field_tooltip/field_tooltip.xml
+++ b/web_field_tooltip/static/src/components/field_tooltip/field_tooltip.xml
@@ -16,7 +16,9 @@
     </t>
 
     <t t-name="web_field_tooltip.FieldTooltipPopover" owl="1">
-        <div class="popup-div">
+        <div
+            t-attf-class="popup-div {{ props.colorMode === 'dark' ? 'popup-dark-mode' : '' }}"
+        >
             <div class="popover-title">
                 <span t-esc="props.title" />
             </div>