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
   }
 }

core/static/core/style.scss

@@ -51,26 +51,51 @@ body {
 
 [tooltip]::before {
   @include shadow;
-  opacity: 0;
   z-index: 1;
+  pointer-events: none;
   content: attr(tooltip);
-  background: hsl(219.6, 20.8%, 96%);
-  color: $black-color;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #333;
+  color: #fff;
   border: 0.5px solid hsl(0, 0%, 50%);
-  ;
   border-radius: 5px;
-  padding: 5px;
-  top: 1em;
+  padding: 5px 10px;
   position: absolute;
-  margin-top: 5px;
   white-space: nowrap;
+  opacity: 0;
   transition: opacity 500ms ease-out;
+  top: 120%; // Put the tooltip under the element
 }
 
 [tooltip]:hover::before {
   opacity: 1;
 }
 
+[position="top"][tooltip]::before {
+  top: initial;
+  bottom: 120%;
+}
+
+[position="bottom"][tooltip]::before {
+  top: 120%;
+  bottom: initial;
+}
+
+[position="left"][tooltip]::before {
+  top: initial;
+  bottom: 0%;
+  left: initial;
+  right: 65%;
+}
+
+[position="right"][tooltip]::before {
+  top: initial;
+  bottom: 0%;
+  left: 150%;
+  right: initial;
+}
+
 .ib {
   display: inline-block;
   padding: 1px;