Refactored tooltip origin computation

material/base.html

@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.2a4617e2.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.cef86043.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.9204c3b2.min.css' | url }}">
@@ -213,7 +213,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.6baa0517.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.615eee59.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

src/assets/javascripts/components/content/code/annotation/_/index.ts

@@ -134,8 +134,20 @@ export function mountAnnotation(
         map(() => container.getBoundingClientRect()),
         map(({ x }) => x)
       )
-        .subscribe(origin => {
+        .subscribe({
-          el.style.setProperty("--md-tooltip-0", `${-origin}px`)
+
+          /* Handle emission */
+          next(origin) {
+            if (origin)
+              el.style.setProperty("--md-tooltip-0", `${-origin}px`)
+            else
+              el.style.removeProperty("--md-tooltip-0")
+          },
+
+          /* Handle complete */
+          complete() {
+            el.style.removeProperty("--md-tooltip-0")
+          }
         })
 
     /* Close open annotation on click */

src/assets/stylesheets/main/layout/_tooltip.scss

@@ -56,9 +56,20 @@
   top: var(--md-tooltip-y);
   left:
     clamp(
-      #{px2rem(16px)},
+      calc(
-      calc(var(--md-tooltip-x) - #{px2rem(16px)}),
+        var(--md-tooltip-0, #{px2rem(0px)}) +
-      calc(100vw - var(--md-tooltip-width) - #{px2rem(16px)})
+        #{px2rem(16px)}
+      ),
+      var(--md-tooltip-x),
+      calc(
+        100vw -
+        var(--md-tooltip-width) +
+        calc(
+          var(--md-tooltip-0, #{px2rem(0px)}) +
+          #{px2rem(16px)}
+        ) -
+        2 * #{px2rem(16px)}
+      )
     );
   // Hack: set an explicit `z-index` so we can transition it to ensure that any
   // following elements are not overlaying the tooltip during the transition.
@@ -144,23 +155,6 @@
   // Code annotation wrapper (= tooltip)
   &__inner {
     top: calc(var(--md-tooltip-y) + 1.2ch);
-    left:
-      clamp(
-        calc(
-          var(--md-tooltip-0, 0) +
-          #{px2rem(16px)}
-        ),
-        var(--md-tooltip-x),
-        calc(
-          100vw -
-          var(--md-tooltip-width) +
-          calc(
-            var(--md-tooltip-0, 0) +
-            #{px2rem(16px)}
-          ) -
-          2 * #{px2rem(16px)}
-        )
-      );
     font-family: var(--md-text-font-family);
 
     // Code annotation tooltip when not focused