diff --git a/com/static/bundled/com/components/ics-calendar-index.ts b/com/static/bundled/com/components/ics-calendar-index.ts
index 2befc97e..ea1cadc5 100644
--- a/com/static/bundled/com/components/ics-calendar-index.ts
+++ b/com/static/bundled/com/components/ics-calendar-index.ts
@@ -310,7 +310,7 @@ export class IcsCalendar extends inheritHtmlElement("div") {
             const button = event.target as HTMLButtonElement;
             button.classList.add("text-copy");
             button.setAttribute(
-              "tooltip",
+              "data-tooltip",
               gettext("Calendar link copied to the clipboard"),
             );
             navigator.clipboard.writeText(
@@ -323,7 +323,7 @@ export class IcsCalendar extends inheritHtmlElement("div") {
               button.classList.remove("text-copied");
               button.classList.add("text-copied");
               button.classList.remove("text-copy");
-              button.removeAttribute("tooltip");
+              button.removeAttribute("data-tooltip");
             }, 700);
           },
         },
diff --git a/com/static/com/components/ics-calendar.scss b/com/static/com/components/ics-calendar.scss
index bb0fea47..e0047842 100644
--- a/com/static/com/components/ics-calendar.scss
+++ b/com/static/com/components/ics-calendar.scss
@@ -22,6 +22,8 @@
 ics-calendar {
   border: none;
   box-shadow: none;
+  overflow: visible;
+  z-index: 1;
 
   #event-details {
     z-index: 10;
@@ -106,7 +108,7 @@ ics-calendar {
   button.text-copy,
   button.text-copy:focus,
   button.text-copy:hover {
-    background-color: green !important;
+    background-color: #67AE6E !important;
     transition: 200ms linear;
   }
 
@@ -115,4 +117,35 @@ ics-calendar {
   button.text-copied:hover {
     transition: 200ms linear;
   }
+
+
+
+  /* Tooltip styles */
+  button[data-tooltip] {
+    position: relative;
+    cursor: pointer;
+  }
+
+  button[data-tooltip]::after {
+    font-size: 10px;
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: 120%; /* Adjust this value to position the tooltip above the button */
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #333;
+    color: #fff;
+    padding: 5px 10px;
+    border-radius: 5px;
+    white-space: nowrap;
+    opacity: 0;
+    transition: opacity 0.3s;
+    pointer-events: none;
+    z-index: 99999;
+  }
+
+  button[data-tooltip]:hover::after,
+  button[data-tooltip]:focus::after {
+    opacity: 1;
+  }
 }
\ No newline at end of file