diff --git a/config.ts b/config.ts
index 1ce0c6a5..9cc77c84 100644
--- a/config.ts
+++ b/config.ts
@@ -4,7 +4,7 @@ import { Astal } from "astal/gtk3";
 export const bar = {
     vertical: true,
     wsPerGroup: 5,
-    dateTimeFormat: "%d/%m/%y %R",
+    dateTime: { format: "%d/%m/%y %R", detailed: "%c" },
 };
 
 export const launcher = {
diff --git a/src/modules/bar.tsx b/src/modules/bar.tsx
index 6ff81fd7..356bff79 100644
--- a/src/modules/bar.tsx
+++ b/src/modules/bar.tsx
@@ -484,10 +484,11 @@ const Battery = () => {
 const DateTime = () => (
     <button
         onClick={(self, event) => event.button === Astal.MouseButton.PRIMARY && togglePopup(self, event, "sideright")}
+        setup={self => setupCustomTooltip(self, bindCurrentTime(config.dateTime.detailed))}
     >
         <box className="module date-time">
             <label className="icon" label="calendar_month" />
-            <label label={bindCurrentTime(config.dateTimeFormat)} />
+            <label label={bindCurrentTime(config.dateTime.format)} />
         </box>
     </button>
 );
@@ -495,7 +496,7 @@ const DateTime = () => (
 const DateTimeVertical = () => (
     <button
         onClick={(self, event) => event.button === Astal.MouseButton.PRIMARY && togglePopup(self, event, "sideright")}
-        setup={self => setupCustomTooltip(self, bindCurrentTime(config.dateTimeFormat))}
+        setup={self => setupCustomTooltip(self, bindCurrentTime(config.dateTime.detailed))}
     >
         <box vertical className="module date-time">
             <label className="icon" label="calendar_month" />