Fix tooltipping snippets

Author: BarkingBad

scaladoc-js/resources/code-snippets.css

@@ -112,16 +112,18 @@ input:checked + .slider:before {
   transform: translateX(var(--translation-size));
 }
 
-.tooltip {
-  position: relative;
+.tooltip-container {
+  display: none;
 }
-.tooltip:hover:after {
+.tooltip:hover .tooltip-container {
+  display: block;
+}
+.tooltip:hover .tooltip-container::after {
   content: attr(label);
   padding: 4px 8px;
   color: white;
   background-color:black;
   position: absolute;
-  left: 0;
   z-index:10;
   box-shadow:0 0 3px #444;
   opacity: 0.8;

scaladoc-js/src/Main.scala

@@ -11,6 +11,7 @@ object Main:
     DropdownHandler()
     Ux()
     ContentContributors()
+    TooltipNormalizer()
     common()
 
   /**

scaladoc-js/src/tooltip-normalizer/TooltipNormalizer.scala

@@ -0,0 +1,25 @@
+package dotty.tools.scaladoc
+
+
+import org.scalajs.dom._
+import org.scalajs.dom.ext._
+import scala.scalajs.js
+import scalajs.js.DynamicImplicits.truthValue
+
+
+// Handful of links
+// https://css-tricks.com/popping-hidden-overflow/
+// https://github.com/highlightjs/highlight.js/issues/728
+// https://stackoverflow.com/a/54482317/14320995
+class TooltipNormalizer:
+  document.addEventListener("mouseover", (e: Event) => {
+    if e.target.asInstanceOf[js.Dynamic].closest(".snippet-error.tooltip") then
+      val tooltipParent = e.target.asInstanceOf[html.Span]
+      val tooltipContainer = tooltipParent.querySelector(".tooltip-container")
+      js.typeOf(tooltipContainer) match
+        case "undefined" =>
+        case _ =>
+          tooltipContainer match
+            case casted: html.Span => casted.style = s"left: ${Math.round(tooltipParent.offsetLeft)}"
+            case _ =>
+  })

scaladoc/resources/dotty_res/styles/scalastyle.css

@@ -77,7 +77,7 @@ code {
   padding: 0 .3em;
 }
 pre {
-  overflow: visible;
+  overflow-x: auto;
   scrollbar-width: thin;
   margin: 0px;
 }

scaladoc/src/dotty/tools/scaladoc/tasty/comments/markdown/SnippetRenderer.scala

@@ -13,7 +13,7 @@ case class SnippetLine(content: String, lineNo: Int, classes: Set[String] = Set.
   private def attributesToString: String = attributes.updated("id", lineNo).map((key, value) => s"""$key="$value"""").mkString(" ")
   def toHTML =
     val label = if messages.nonEmpty then s"""label="${messages.map(_.escapeReservedTokens).mkString("\n")}"""" else ""
-    s"""<span $attributesToString class="${classes.mkString(" ")}" $label>$content</span>"""
+    s"""<span $attributesToString class="${classes.mkString(" ")}"><span class="tooltip-container" $label></span>$content</span>"""
 
 object SnippetRenderer:
   val hiddenStartSymbol = "//{"