fix: add hover bridge to tooltips for smoother user experience (#144)

Signed-off-by: squidfunk <martin.donath@squidfunk.com>

Author: squidfunk

…tylesheets/classic/main.dc9b4186.min.css …tylesheets/classic/main.82a87433.min.cssdist/assets/stylesheets/classic/main.dc9b4186.min.css renamed to dist/assets/stylesheets/classic/main.82a87433.min.css dist/assets/stylesheets/classic/main.dc9b4186.min.css renamed to dist/assets/stylesheets/classic/main.82a87433.min.css

@@ -47,9 +47,9 @@
     {% endblock %}
     {% block styles %}
       {% if config.theme.variant == "modern" %}
-        {% set href = 'assets/stylesheets/modern/main.1ebfa1a4.min.css' | url %}
+        {% set href = 'assets/stylesheets/modern/main.19d3147f.min.css' | url %}
       {% else %}
-        {% set href = 'assets/stylesheets/classic/main.dc9b4186.min.css' | url %}
+        {% set href = 'assets/stylesheets/classic/main.82a87433.min.css' | url %}
       {% endif %}
       <link rel="stylesheet" href="{{ href }}">
       {% if config.theme.palette %}

…stylesheets/modern/main.1ebfa1a4.min.css …stylesheets/modern/main.19d3147f.min.cssdist/assets/stylesheets/modern/main.1ebfa1a4.min.css renamed to dist/assets/stylesheets/modern/main.19d3147f.min.css dist/assets/stylesheets/modern/main.1ebfa1a4.min.css renamed to dist/assets/stylesheets/modern/main.19d3147f.min.css

@@ -110,6 +110,40 @@
     border-bottom: var(--md-tooltip-tail) solid var(--md-default-bg-color);
   }
 
+  // Hover bridge for interactive tooltips to span the visual gap to the host
+  &[role="dialog"]::after {
+    position: absolute;
+    left:
+      clamp(
+        #{px2rem(16px)},
+        calc(
+          var(--md-tooltip-host-x) -
+          #{px2rem(16px)}
+        ),
+        calc(
+          100vw -
+          var(--md-tooltip-width) -
+          #{px2rem(16px)}
+        )
+      );
+    z-index: 1;
+    display: block;
+    width: var(--md-tooltip-width);
+    height: px2rem(16px);
+    content: "";
+    pointer-events: auto;
+  }
+
+  // Hover bridge if rendered above target
+  &[role="dialog"].md-tooltip2--top::after {
+    top: 100%;
+  }
+
+  // Hover bridge if rendered below target
+  &[role="dialog"].md-tooltip2--bottom::after {
+    bottom: 100%;
+  }
+
   // Tooltip is visible
   &--active {
     z-index: 4;

dist/base.html

@@ -110,6 +110,40 @@
     border-bottom: var(--md-tooltip-tail) solid var(--md-default-bg-color);
   }
 
+  // Hover bridge for interactive tooltips to span the visual gap to the host
+  &[role="dialog"]::after {
+    position: absolute;
+    left:
+      clamp(
+        #{px2rem(16px)},
+        calc(
+          var(--md-tooltip-host-x) -
+          #{px2rem(16px)}
+        ),
+        calc(
+          100vw -
+          var(--md-tooltip-width) -
+          #{px2rem(16px)}
+        )
+      );
+    z-index: 1;
+    display: block;
+    width: var(--md-tooltip-width);
+    height: px2rem(16px);
+    content: "";
+    pointer-events: auto;
+  }
+
+  // Hover bridge if rendered above target
+  &[role="dialog"].md-tooltip2--top::after {
+    top: 100%;
+  }
+
+  // Hover bridge if rendered below target
+  &[role="dialog"].md-tooltip2--bottom::after {
+    bottom: 100%;
+  }
+
   // Tooltip is visible
   &--active {
     z-index: 4;