Adapt calendar to new tooltip library

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

@@ -315,13 +315,13 @@ export class IcsCalendar extends inheritHtmlElement("div") {
             const button = event.target as HTMLButtonElement;
             button.classList.add("text-copy");
             if (!button.hasAttribute("position")) {
-              button.setAttribute("tooltip", gettext("Link copied"));
               button.setAttribute("position", "top");
-              button.setAttribute("no-hover", "");
             }
             if (button.classList.contains("text-copied")) {
               button.classList.remove("text-copied");
             }
+            button.setAttribute("tooltip", gettext("Link copied"));
+            button.dispatchEvent(new Event("mouseover", { bubbles: true }));
             navigator.clipboard.writeText(
               new URL(
                 await makeUrl(calendarCalendarInternal),
@@ -332,6 +332,8 @@ export class IcsCalendar extends inheritHtmlElement("div") {
               button.classList.remove("text-copied");
               button.classList.add("text-copied");
               button.classList.remove("text-copy");
+              button.dispatchEvent(new Event("mouseout", { bubbles: true }));
+              button.removeAttribute("tooltip");
             }, 1500);
           },
         },

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

@@ -1,4 +1,5 @@
 @import "core/static/core/colors";
+@import "core/static/core/tooltips";
 
 
 :root {
@@ -116,8 +117,4 @@ ics-calendar {
     transition: 500ms ease-out;
   }
 
-  button.text-copied[tooltip]::before {
-    opacity: 0;
-    transition: opacity 500ms ease-out;
-  }
 }

core/static/core/style.scss

@@ -45,7 +45,7 @@ body {
   }
 }
 
-.tooltip {
+@mixin tooltip {
   @include shadow;
   z-index: 1;
   pointer-events: none;
@@ -58,7 +58,10 @@ body {
   white-space: nowrap;
   opacity: 0;
   transition: opacity 500ms ease-in;
+}
 
+.tooltip {
+  @include tooltip;
   position: absolute;
   width: max-content;
 

core/static/core/tooltips.scss

@@ -0,0 +1,26 @@
+@import "colors";
+
+.tooltip {
+  @include shadow;
+  z-index: 1;
+  pointer-events: none;
+  background-color: #333;
+  color: #fff;
+  border: 0.5px solid hsl(0, 0%, 50%);
+  border-radius: 5px;
+  padding: 5px 10px;
+  position: absolute;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 500ms ease-out;
+  position: absolute;
+  width: max-content;
+
+  left: 0;
+  top: 0;
+}
+
+.tooltip[tooltip-status=open] {
+  opacity: 1;
+  transition: opacity 500ms ease-in;
+}

core/templates/core/base.jinja

@@ -7,6 +7,7 @@
       <link rel="shortcut icon" href="{{ static('core/img/favicon.ico') }}">
       <link rel="stylesheet" href="{{ static('core/base.css') }}">
       <link rel="stylesheet" href="{{ static('core/style.scss') }}">
+      <link rel="stylesheet" href="{{ static('core/tooltips.scss') }}">
       <link rel="stylesheet" href="{{ static('core/markdown.scss') }}">
       <link rel="stylesheet" href="{{ static('core/header.scss') }}">
       <link rel="stylesheet" href="{{ static('core/navbar.scss') }}">