Introduce position attributes for tooltips

com/static/bundled/com/components/ics-calendar-index.ts

@@ -310,9 +310,10 @@ export class IcsCalendar extends inheritHtmlElement("div") {
             const button = event.target as HTMLButtonElement;
             button.classList.add("text-copy");
             button.setAttribute(
-              "data-tooltip",
+              "tooltip",
               gettext("Calendar link copied to the clipboard"),
             );
+            button.setAttribute("position", "top");
             navigator.clipboard.writeText(
               new URL(
                 await makeUrl(calendarCalendarInternal),
@@ -323,7 +324,8 @@ export class IcsCalendar extends inheritHtmlElement("div") {
               button.classList.remove("text-copied");
               button.classList.add("text-copied");
               button.classList.remove("text-copy");
-              button.removeAttribute("data-tooltip");
+              button.removeAttribute("tooltip");
+              button.removeAttribute("position");
             }, 700);
           },
         },

com/static/com/components/ics-calendar.scss

@@ -22,8 +22,6 @@
 ics-calendar {
   border: none;
   box-shadow: none;
-  overflow: visible;
-  z-index: 1;
 
   #event-details {
     z-index: 10;
@@ -118,34 +116,7 @@ ics-calendar {
     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;
+  [tooltip]::before {
+    font-size: 10px; // this will overflow otherwise
   }
 }