Make spotlight show on hover

This makes the spotlight show on hover instead of click. Clicks can be
used to persist it, which is also what's used on mobile.

Author: Manishearth

src/librustdoc/html/render.rs

@@ -3604,14 +3604,10 @@ fn spotlight_decl(decl: &clean::FnDecl) -> String {
     if !out.is_empty() {
         out.insert_str(
             0,
-            &format!(
-                "<span class=\"important-traits\"><div class='tooltip'>ⓘ\
-                                    <span class='tooltiptext'>Important traits for {}</span></div>\
-                                    <div class=\"content hidden\">",
-                trait_
-            ),
+            "<span class=\"important-traits\"><span class=\"important-traits-tooltip\">ⓘ<div class='important-traits-tooltiptext'><span class=\"docblock\">"
+
         );
-        out.push_str("</code></div></span>");
+        out.push_str("</code></span></div></span></span>");
     }
 
     out.into_inner()

src/librustdoc/html/static/main.js

@@ -2624,28 +2624,13 @@ function defocusSearchBar() {
         });
     }());
 
-    function showModal(content) {
-        var modal = document.createElement("div");
-        modal.id = "important";
-        addClass(modal, "modal");
-        modal.innerHTML = "<div class=\"modal-content\"><div class=\"close\" id=\"modal-close\">✕" +
-                          "</div><div class=\"whiter\"></div><span class=\"docblock\">" + content +
-                          "</span></div>";
-        document.getElementsByTagName("body")[0].appendChild(modal);
-        document.getElementById("modal-close").onclick = hideModal;
-        modal.onclick = hideModal;
-    }
-
-    function hideModal() {
-        var modal = document.getElementById("important");
-        if (modal) {
-            modal.parentNode.removeChild(modal);
-        }
+    function showImportantTraits(content) {
+        let list = content.classList
     }
 
     onEachLazy(document.getElementsByClassName("important-traits"), function(e) {
         e.onclick = function() {
-            showModal(e.lastElementChild.innerHTML);
+            e.getElementsByClassName('important-traits-tooltiptext')[0].classList.toggle("force-tooltip")
         };
     });
 

src/librustdoc/html/static/rustdoc.css

@@ -1078,10 +1078,6 @@ h3 > .collapse-toggle, h4 > .collapse-toggle {
 	font-size: 16px;
 }
 
-.important-traits:hover .tooltiptext {
-	display: inline;
-}
-
 .tooltip .tooltiptext::after {
 	content: " ";
 	position: absolute;
@@ -1097,9 +1093,46 @@ h3 > .collapse-toggle, h4 > .collapse-toggle {
 	font-size: 20px;
 }
 
-.important-traits .tooltip .tooltiptext {
-	border: 1px solid;
-	font-weight: normal;
+.important-traits-tooltip {
+	display: inline-block;
+	cursor: pointer;
+}
+
+.important-traits:hover .important-traits-tooltiptext,
+.important-traits .important-traits-tooltiptext.force-tooltip {
+	display: inline-block;
+}
+
+.important-traits .important-traits-tooltiptext {
+	display: none;
+	padding: 5px 3px 3px 3px;
+	border-radius: 6px;
+	margin-left: 5px;
+	z-index: 10;
+	font-size: 16px;
+	cursor: default;
+	position: absolute;
+	/* Themes will override the color here,
+	   but it's necessary to make it opaque */
+	background-color: #eee;
+	border: 1px solid #999;
+}
+
+.important-traits-tooltip::after {
+	/* The margin on the tooltip does not capture hover events,
+	   this extends the area of hover enough so that mouse hover is not
+	   lost when moving the mouse to the tooltip */
+    content: "\00a0\00a0\00a0";
+}
+
+.important-traits .important, .important-traits .docblock {
+	margin: 0;
+}
+
+.important-traits .docblock code.content{
+    margin: 0;
+    padding: 0;
+    font-size: 20px;
 }
 
 pre.rust {
@@ -1489,69 +1522,12 @@ h4 > .important-traits {
 	}
 }
 
-.modal {
-	position: fixed;
-	width: 100vw;
-	height: 100vh;
-	z-index: 10000;
-	top: 0;
-	left: 0;
-}
-
-.modal-content {
-	display: block;
-	max-width: 60%;
-	min-width: 200px;
-	padding: 8px;
-	top: 40%;
-	position: absolute;
-	left: 50%;
-	transform: translate(-50%, -40%);
-	border: 1px solid;
-	border-radius: 4px;
-	border-top-right-radius: 0;
-}
-
-.modal-content > .docblock {
-	margin: 0;
-}
-
 h3.important {
 	margin: 0;
 	margin-bottom: 13px;
 	font-size: 19px;
 }
 
-.modal-content > .docblock > code.content {
-	margin: 0;
-	padding: 0;
-	font-size: 20px;
-}
-
-.modal-content > .close {
-	position: absolute;
-	font-weight: 900;
-	right: -25px;
-	top: -1px;
-	font-size: 18px;
-	width: 25px;
-	padding-right: 2px;
-	border-top-right-radius: 5px;
-	border-bottom-right-radius: 5px;
-	text-align: center;
-	border: 1px solid;
-	border-right: 0;
-	cursor: pointer;
-}
-
-.modal-content > .whiter {
-	height: 25px;
-	position: absolute;
-	width: 3px;
-	right: -2px;
-	top: 0px;
-}
-
 kbd {
 	display: inline-block;
 	padding: 3px 5px;

src/librustdoc/html/static/themes/dark.css

@@ -337,10 +337,9 @@ pre.ignore:hover, .information:hover + pre.ignore {
 	border-color: transparent black transparent transparent;
 }
 
-.important-traits .tooltip .tooltiptext {
-	background-color: white;
-	color: black;
-	border-color: black;
+.important-traits-tooltiptext {
+	background-color: #111 !important;
+	border-color: #777 !important;
 }
 
 #titles > div:not(.selected) {
@@ -356,33 +355,6 @@ pre.ignore:hover, .information:hover + pre.ignore {
 	color: #888;
 }
 
-.modal {
-	background-color: rgba(0,0,0,0.3);
-}
-
-.modal-content {
-	background-color: #272727;
-	border-color: #999;
-}
-
-.modal-content > .close {
-	background-color: #272727;
-	border-color: #999;
-}
-
-.modal-content > .close:hover {
-	background-color: #ff1f1f;
-	color: white;
-}
-
-.modal-content > .whiter {
-	background-color: #272727;
-}
-
-.modal-content > .close:hover + .whiter {
-	background-color: #ff1f1f;
-}
-
 @media (max-width: 700px) {
 	.sidebar-menu {
 		background-color: #505050;

src/librustdoc/html/static/themes/light.css

@@ -331,10 +331,9 @@ pre.ignore:hover, .information:hover + pre.ignore {
 	border-color: transparent black transparent transparent;
 }
 
-.important-traits .tooltip .tooltiptext {
-	background-color: white;
-	color: black;
-	border-color: black;
+.important-traits-tooltiptext {
+	background-color: #eee !important;
+	border-color: #999 !important;
 }
 
 #titles > div:not(.selected) {
@@ -350,33 +349,6 @@ pre.ignore:hover, .information:hover + pre.ignore {
 	color: #888;
 }
 
-.modal {
-	background-color: rgba(0,0,0,0.3);
-}
-
-.modal-content {
-	background-color: #eee;
-	border-color: #999;
-}
-
-.modal-content > .close {
-	background-color: #eee;
-	border-color: #999;
-}
-
-.modal-content > .close:hover {
-	background-color: #ff1f1f;
-	color: white;
-}
-
-.modal-content > .whiter {
-	background-color: #eee;
-}
-
-.modal-content > .close:hover + .whiter {
-	background-color: #ff1f1f;
-}
-
 @media (max-width: 700px) {
 	.sidebar-menu {
 		background-color: #F1F1F1;