diff --git a/addons/hr_contract/static/src/widgets/tooltip_warning_widget.js b/addons/hr_contract/static/src/widgets/tooltip_warning_widget.js
new file mode 100644
index 00000000000..17a5f2dd7bc
--- /dev/null
+++ b/addons/hr_contract/static/src/widgets/tooltip_warning_widget.js
@@ -0,0 +1,17 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _t } from "@web/core/l10n/translation";
+
+const { Component } = owl;
+
+export class ContractWarningTooltip extends Component {
+    get tooltipInfo() {
+        return JSON.stringify({
+            "text" : _t("Calendar Mismatch : The employee's calendar does not match this contract's calendar. This could lead to unexpected behaviors."),
+        })
+    }
+}
+ContractWarningTooltip.template = "hr_contract.ContractWarningTooltip";
+
+registry.category("view_widgets").add("contract_warning_tooltip", ContractWarningTooltip);
diff --git a/addons/hr_contract/static/src/widgets/tooltip_warning_widget.xml b/addons/hr_contract/static/src/widgets/tooltip_warning_widget.xml
new file mode 100644
index 00000000000..3e1c6ded16c
--- /dev/null
+++ b/addons/hr_contract/static/src/widgets/tooltip_warning_widget.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+    <t t-name="hr_contract.ContractWarningTooltip" owl="1">
+        <span
+            class="fa fa-exclamation-triangle text-danger o_calendar_warning ms-3"
+            data-tooltip-template="hr_contract.CalendarMismatch"
+            t-att-data-tooltip-info='tooltipInfo'/>
+    </t>
+</templates>
+
diff --git a/addons/hr_contract/views/hr_contract_views.xml b/addons/hr_contract/views/hr_contract_views.xml
index e3c6fa9cb1b..518dfa45805 100644
--- a/addons/hr_contract/views/hr_contract_views.xml
+++ b/addons/hr_contract/views/hr_contract_views.xml
@@ -19,15 +19,10 @@
                     <xpath expr="//field[@name='resource_calendar_id']" position="replace">
                         <field name="calendar_mismatch" invisible="1"/>
                         <label for="resource_calendar_id"/>
-                        <div>
-                            <field name="resource_calendar_id" required="1" nolabel="1"/>
-                            <span attrs="{'invisible': [('calendar_mismatch', '=', False)]}"
-                                class="fa fa-exclamation-triangle text-danger o_calendar_warning ms-3"
-                                data-tooltip-template="hr_contract.CalendarMismatch"
-                                data-tooltip-info='{
-                                        "text":"Calendar Mismatch : The employee&apos;s calendar does not match this contract&apos;s calendar. This could lead to unexpected behaviors."
-                                    }'>
-                            </span>
+                        <div class="d-flex align-items-center">
+                            <field name="resource_calendar_id" required="1"/>
+                            <widget name="contract_warning_tooltip"
+                                attrs="{'invisible': [('calendar_mismatch', '=', False)]}"/>
                         </div>
                     </xpath>
                     <field name="job_id" position="before">
@@ -209,16 +204,17 @@
                                 <field name="structure_type_id" groups="hr_contract.group_hr_contract_manager" domain="['|', ('country_id', '=', False), ('country_id', '=', company_country_id)]"/>
                                 <field name="calendar_mismatch" invisible="1"/>
                                 <label for="resource_calendar_id"/>
-                                <div id="resource_calendar_warning">
-                                    <field name="resource_calendar_id" groups="!hr_contract.group_hr_contract_manager" required="1" nolabel="1" options="{'no_open': True, 'no_create': True}"/>
-                                    <field name="resource_calendar_id" groups="hr_contract.group_hr_contract_manager" required="1" nolabel="1"/>
-                                    <span attrs="{'invisible': ['|', ('calendar_mismatch', '=', False), ('state', '!=', 'open')]}"
-                                        class="fa fa-exclamation-triangle text-danger o_calendar_warning ms-3"
-                                        data-tooltip-template="hr_contract.CalendarMismatch"
-                                        data-tooltip-info='{
-                                                "text":"Calendar Mismatch : The employee&apos;s calendar does not match this contract&apos;s calendar. This could lead to unexpected behaviors."
-                                            }'>
-                                    </span>
+                                <div id="resource_calendar_warning" class="d-flex align-items-center">
+                                        <field name="resource_calendar_id"
+                                            groups="!hr_contract.group_hr_contract_manager"
+                                            required="1"
+                                            options="{'no_open': True, 'no_create': True}"/>
+                                        <field name="resource_calendar_id"
+                                            groups="hr_contract.group_hr_contract_manager"
+                                            required="1"/>
+                                        <widget
+                                            name="contract_warning_tooltip"
+                                            attrs="{'invisible': ['|', ('calendar_mismatch', '=', False), ('state', '!=', 'open')]}"/>
                                 </div>
                             </group>
                             <group name="top_info_right">