diff --git a/addons/hr_contract/__manifest__.py b/addons/hr_contract/__manifest__.py
index 741c249b614..ed75cd3afab 100644
--- a/addons/hr_contract/__manifest__.py
+++ b/addons/hr_contract/__manifest__.py
@@ -35,7 +35,10 @@ You can assign several contracts per employee.
     'application': True,
     'assets': {
         'web.assets_backend': [
-            'hr_contract/static/src/**/*',
+            'hr_contract/static/src/scss/*',
+        ],
+        'web.assets_qweb': [
+            'hr_contract/static/src/xml/*',
         ],
     },
     'license': 'LGPL-3',
diff --git a/addons/hr_contract/static/src/scss/calendar_mismatch.scss b/addons/hr_contract/static/src/scss/calendar_mismatch.scss
index 9699718c975..9d9d1268335 100644
--- a/addons/hr_contract/static/src/scss/calendar_mismatch.scss
+++ b/addons/hr_contract/static/src/scss/calendar_mismatch.scss
@@ -2,18 +2,4 @@
     .o_calendar_warning {
         cursor: help;
     }
-
-    .o_calendar_warning_tooltip {
-        display: block;
-        height: 0;
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    .o_calendar_warning:hover + .o_calendar_warning_tooltip {
-        display: inline;
-        height: auto;
-        opacity: 1;
-        transition: opacity 0.5s linear;
-    }
 }
diff --git a/addons/hr_contract/static/src/xml/hr_contract_templates.xml b/addons/hr_contract/static/src/xml/hr_contract_templates.xml
new file mode 100644
index 00000000000..c2c1eeb17f1
--- /dev/null
+++ b/addons/hr_contract/static/src/xml/hr_contract_templates.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="hr_contract.CalendarMismatch" owl="1">
+        <div class="o-tooltip px-1 py-2">
+            <p style="font-size: 12px;" class="text-danger"
+                t-esc="info.text"/>
+        </div>
+    </t>
+</templates>
diff --git a/addons/hr_contract/views/hr_contract_views.xml b/addons/hr_contract/views/hr_contract_views.xml
index 7ac94420a59..c62e2700f83 100644
--- a/addons/hr_contract/views/hr_contract_views.xml
+++ b/addons/hr_contract/views/hr_contract_views.xml
@@ -52,10 +52,11 @@
                         <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 pl-3">
-                            </span>
-                            <span class="o_calendar_warning_tooltip text-danger">
-                                Calendar Mismatch : The employee's calendar does not match its current contract calendar. This could lead to unexpected behaviors.
+                                class="fa fa-exclamation-triangle text-danger o_calendar_warning ml-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>
                     </xpath>
@@ -163,10 +164,11 @@
                                 <div id="resource_calendar_warning">
                                     <field name="resource_calendar_id" required="1" nolabel="1" options="{'no_open': True, 'no_create': True}"/>
                                     <span attrs="{'invisible': ['|', ('calendar_mismatch', '=', False), ('state', '!=', 'open')]}"
-                                        class="fa fa-exclamation-triangle text-danger o_calendar_warning pl-3">
-                                    </span>
-                                    <span class="o_calendar_warning_tooltip text-danger">
-                                        Calendar Mismatch : The employee's calendar does not match this contract's calendar. This could lead to unexpected behaviors.
+                                        class="fa fa-exclamation-triangle text-danger o_calendar_warning ml-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>
                             </group>
@@ -302,7 +304,7 @@
                     </templates>
                 </kanban>
             </field>
-         </record>
+        </record>
 
         <record id="hr_contract_view_activity" model="ir.ui.view">
             <field name="name">hr.contract.activity</field>