Rollup merge of #107340 - notriddle:notriddle/simplify-doctest-tooltip, r=GuillaumeGomez

rustdoc: merge doctest tooltip with notable traits tooltip Fixes https://discord.com/channels/442252698964721669/443150878111694848/1066420140167680000 <details><summary>a user report where the tooltip arrow overlaps the text</summary> ![](https://cdn.discordapp.com/attachments/443150878111694848/1066420139530145812/this-example-is-not-tested-busted-rendering.png) </details> Fixes #91100 Preview: <https://notriddle.com/notriddle-rustdoc-demos/simplify-doctest-tooltip/std/vec/struct.Vec.html#indexing> Screenshot: ![image](https://user-images.githubusercontent.com/1593513/214975516-72667632-4609-49fa-8c37-e8d2ba1ba7dc.png)
2023-02-13 11:34:56 +01:00 · 2023-02-13 11:34:56 +01:00 · 3054759fa8
parent 20081880ad 7aa4a205a8
commit 3054759fa8
12 changed files with 184 additions and 234 deletions
--- a/src/librustdoc/html/highlight.rs
+++ b/src/librustdoc/html/highlight.rs
@ -96,13 +96,19 @@ fn write_header(out: &mut Buffer, class: &str, extra_content: Option<Buffer>, to
    );

    if tooltip != Tooltip::None {
+        let edition_code;
        write!(
            out,
-            "<div class='tooltip'{}>ⓘ</div>",
-            if let Tooltip::Edition(edition_info) = tooltip {
-                format!(" data-edition=\"{}\"", edition_info)
-            } else {
-                String::new()
+            "<a href=\"#\" class=\"tooltip\" title=\"{}\">ⓘ</a>",
+            match tooltip {
+                Tooltip::Ignore => "This example is not tested",
+                Tooltip::CompileFail => "This example deliberately fails to compile",
+                Tooltip::ShouldPanic => "This example panics",
+                Tooltip::Edition(edition) => {
+                    edition_code = format!("This example runs with edition {edition}");
+                    &edition_code
+                }
+                Tooltip::None => unreachable!(),
            },
        );
    }
--- a/src/librustdoc/html/render/mod.rs
+++ b/src/librustdoc/html/render/mod.rs
@ -1310,7 +1310,7 @@ pub(crate) fn notable_traits_button(ty: &clean::Type, cx: &mut Context<'_>) -> O
    if has_notable_trait {
        cx.types_with_notable_traits.insert(ty.clone());
        Some(format!(
-            " <a href=\"#\" class=\"notable-traits\" data-ty=\"{ty}\">ⓘ</a>",
+            " <a href=\"#\" class=\"tooltip\" data-notable-ty=\"{ty}\">ⓘ</a>",
            ty = Escape(&format!("{:#}", ty.print(cx))),
        ))
    } else {
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@ -715,8 +715,8 @@ h2.small-section-header > .anchor {
 .main-heading a:hover,
 .example-wrap > pre.rust a:hover,
 .all-items a:hover,
-.docblock a:not(.test-arrow):not(.scrape-help):hover,
-.docblock-short a:not(.test-arrow):not(.scrape-help):hover,
+.docblock a:not(.test-arrow):not(.scrape-help):not(.tooltip):hover,
+.docblock-short a:not(.test-arrow):not(.scrape-help):not(.tooltip):hover,
 .item-info a {
 	text-decoration: underline;
 }
@ -1109,44 +1109,8 @@ pre.rust .doccomment {
 	display: block;
 	left: -25px;
 	top: 5px;
-}
-
-.example-wrap .tooltip:hover::after {
-	padding: 5px 3px 3px 3px;
-	border-radius: 6px;
-	margin-left: 5px;
-	font-size: 1rem;
-	border: 1px solid var(--border-color);
-	position: absolute;
-	width: max-content;
-	top: -2px;
-	z-index: 1;
-	background-color: var(--tooltip-background-color);
-	color: var(--tooltip-color);
-}
-
-.example-wrap .tooltip:hover::before {
-	content: " ";
-	position: absolute;
-	top: 50%;
-	left: 16px;
-	margin-top: -5px;
-	z-index: 1;
-	border: 5px solid transparent;
-	border-right-color: var(--tooltip-background-color);
-}
-
-.example-wrap.ignore .tooltip:hover::after {
-	content: "This example is not tested";
-}
-.example-wrap.compile_fail .tooltip:hover::after {
-	content: "This example deliberately fails to compile";
-}
-.example-wrap.should_panic .tooltip:hover::after {
-	content: "This example panics";
-}
-.example-wrap.edition .tooltip:hover::after {
-	content: "This code runs with edition " attr(data-edition);
+	margin: 0;
+	line-height: 1;
 }

 .example-wrap.compile_fail .tooltip,
@ -1213,7 +1177,7 @@ a.test-arrow:hover {
 	border-right: 3px solid var(--target-border-color);
 }

-.notable-traits {
+.code-header a.tooltip {
 	color: inherit;
 	margin-right: 15px;
 	position: relative;
@ -1222,7 +1186,7 @@ a.test-arrow:hover {
 /* placeholder thunk so that the mouse can easily travel from "(i)" to popover
 	the resulting "hover tunnel" is a stepped triangle, approximating
 	https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown */
-.notable-traits:hover::after {
+a.tooltip:hover::after {
 	position: absolute;
 	top: calc(100% - 10px);
 	left: -15px;
@ -1231,11 +1195,11 @@ a.test-arrow:hover {
 	content: "\00a0";
 }

-.notable .content {
+.popover.tooltip .content {
 	margin: 0.25em 0.5em;
 }

-.notable .content pre, .notable .content code {
+.popover.tooltip .content pre, .popover.tooltip .content code {
 	background: transparent;
 	margin: 0;
 	padding: 0;
@ -1243,7 +1207,7 @@ a.test-arrow:hover {
 	white-space: pre-wrap;
 }

-.notable .content > h3:first-child {
+.popover.tooltip .content > h3:first-child {
 	margin: 0 0 5px 0;
 }

--- a/src/librustdoc/html/static/css/themes/ayu.css
+++ b/src/librustdoc/html/static/css/themes/ayu.css
@ -74,8 +74,6 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--test-arrow-hover-background-color: rgba(57, 175, 215, 0.368);
 	--target-background-color: rgba(255, 236, 164, 0.06);
 	--target-border-color: rgba(255, 180, 76, 0.85);
-	--tooltip-background-color: #314559;
-	--tooltip-color: #c5c5c5;
 	--kbd-color: #c5c5c5;
 	--kbd-background: #314559;
 	--kbd-box-shadow-color: #5c6773;
--- a/src/librustdoc/html/static/css/themes/dark.css
+++ b/src/librustdoc/html/static/css/themes/dark.css
@ -69,8 +69,6 @@
 	--test-arrow-hover-background-color: #4e8bca;
 	--target-background-color: #494a3d;
 	--target-border-color: #bb7410;
-	--tooltip-background-color: #000;
-	--tooltip-color: #fff;
 	--kbd-color: #000;
 	--kbd-background: #fafbfc;
 	--kbd-box-shadow-color: #c6cbd1;
--- a/src/librustdoc/html/static/css/themes/light.css
+++ b/src/librustdoc/html/static/css/themes/light.css
@ -69,8 +69,6 @@
 	--test-arrow-hover-background-color: #4e8bca;
 	--target-background-color: #fdffd3;
 	--target-border-color: #ad7c37;
-	--tooltip-background-color: #000;
-	--tooltip-color: #fff;
 	--kbd-color: #000;
 	--kbd-background: #fafbfc;
 	--kbd-box-shadow-color: #c6cbd1;
--- a/src/librustdoc/html/static/js/main.js
+++ b/src/librustdoc/html/static/js/main.js
@ -378,7 +378,7 @@ function loadCss(cssUrl) {
        }
        ev.preventDefault();
        searchState.defocus();
-        window.hideAllModals(true); // true = reset focus for notable traits
+        window.hideAllModals(true); // true = reset focus for tooltips
    }

    function handleShortcut(ev) {
@ -784,17 +784,17 @@ function loadCss(cssUrl) {
            // we need to switch away from mobile mode and make the main content area scrollable.
            hideSidebar();
        }
-        if (window.CURRENT_NOTABLE_ELEMENT) {
-            // As a workaround to the behavior of `contains: layout` used in doc togglers, the
-            // notable traits popup is positioned using javascript.
+        if (window.CURRENT_TOOLTIP_ELEMENT) {
+            // As a workaround to the behavior of `contains: layout` used in doc togglers,
+            // tooltip popovers are positioned using javascript.
            //
            // This means when the window is resized, we need to redo the layout.
-            const base = window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE;
-            const force_visible = base.NOTABLE_FORCE_VISIBLE;
-            hideNotable(false);
+            const base = window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE;
+            const force_visible = base.TOOLTIP_FORCE_VISIBLE;
+            hideTooltip(false);
            if (force_visible) {
-                showNotable(base);
-                base.NOTABLE_FORCE_VISIBLE = true;
+                showTooltip(base);
+                base.TOOLTIP_FORCE_VISIBLE = true;
            }
        }
    });
@ -822,27 +822,35 @@ function loadCss(cssUrl) {
        });
    });

-    function showNotable(e) {
-        if (!window.NOTABLE_TRAITS) {
+    function showTooltip(e) {
+        const notable_ty = e.getAttribute("data-notable-ty");
+        if (!window.NOTABLE_TRAITS && notable_ty) {
            const data = document.getElementById("notable-traits-data");
            if (data) {
                window.NOTABLE_TRAITS = JSON.parse(data.innerText);
            } else {
-                throw new Error("showNotable() called on page without any notable traits!");
+                throw new Error("showTooltip() called with notable without any notable traits!");
            }
        }
-        if (window.CURRENT_NOTABLE_ELEMENT && window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE === e) {
+        if (window.CURRENT_TOOLTIP_ELEMENT && window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE === e) {
            // Make this function idempotent.
            return;
        }
        window.hideAllModals(false);
-        const ty = e.getAttribute("data-ty");
        const wrapper = document.createElement("div");
-        wrapper.innerHTML = "<div class=\"content\">" + window.NOTABLE_TRAITS[ty] + "</div>";
-        wrapper.className = "notable popover";
+        if (notable_ty) {
+            wrapper.innerHTML = "<div class=\"content\">" +
+                window.NOTABLE_TRAITS[notable_ty] + "</div>";
+        } else if (e.getAttribute("title") !== undefined) {
+            const titleContent = document.createElement("div");
+            titleContent.className = "content";
+            titleContent.appendChild(document.createTextNode(e.getAttribute("title")));
+            wrapper.appendChild(titleContent);
+        }
+        wrapper.className = "tooltip popover";
        const focusCatcher = document.createElement("div");
        focusCatcher.setAttribute("tabindex", "0");
-        focusCatcher.onfocus = hideNotable;
+        focusCatcher.onfocus = hideTooltip;
        wrapper.appendChild(focusCatcher);
        const pos = e.getBoundingClientRect();
        // 5px overlap so that the mouse can easily travel from place to place
@ -864,62 +872,62 @@ function loadCss(cssUrl) {
            );
        }
        wrapper.style.visibility = "";
-        window.CURRENT_NOTABLE_ELEMENT = wrapper;
-        window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE = e;
+        window.CURRENT_TOOLTIP_ELEMENT = wrapper;
+        window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE = e;
        wrapper.onpointerleave = function(ev) {
            // If this is a synthetic touch event, ignore it. A click event will be along shortly.
            if (ev.pointerType !== "mouse") {
                return;
            }
-            if (!e.NOTABLE_FORCE_VISIBLE && !elemIsInParent(event.relatedTarget, e)) {
-                hideNotable(true);
+            if (!e.TOOLTIP_FORCE_VISIBLE && !elemIsInParent(event.relatedTarget, e)) {
+                hideTooltip(true);
            }
        };
    }

-    function notableBlurHandler(event) {
-        if (window.CURRENT_NOTABLE_ELEMENT &&
-            !elemIsInParent(document.activeElement, window.CURRENT_NOTABLE_ELEMENT) &&
-            !elemIsInParent(event.relatedTarget, window.CURRENT_NOTABLE_ELEMENT) &&
-            !elemIsInParent(document.activeElement, window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE) &&
-            !elemIsInParent(event.relatedTarget, window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE)
+    function tooltipBlurHandler(event) {
+        if (window.CURRENT_TOOLTIP_ELEMENT &&
+            !elemIsInParent(document.activeElement, window.CURRENT_TOOLTIP_ELEMENT) &&
+            !elemIsInParent(event.relatedTarget, window.CURRENT_TOOLTIP_ELEMENT) &&
+            !elemIsInParent(document.activeElement, window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE) &&
+            !elemIsInParent(event.relatedTarget, window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE)
        ) {
            // Work around a difference in the focus behaviour between Firefox, Chrome, and Safari.
-            // When I click the button on an already-opened notable trait popover, Safari
+            // When I click the button on an already-opened tooltip popover, Safari
            // hides the popover and then immediately shows it again, while everyone else hides it
            // and it stays hidden.
            //
            // To work around this, make sure the click finishes being dispatched before
-            // hiding the popover. Since `hideNotable()` is idempotent, this makes Safari behave
+            // hiding the popover. Since `hideTooltip()` is idempotent, this makes Safari behave
            // consistently with the other two.
-            setTimeout(() => hideNotable(false), 0);
+            setTimeout(() => hideTooltip(false), 0);
        }
    }

-    function hideNotable(focus) {
-        if (window.CURRENT_NOTABLE_ELEMENT) {
-            if (window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.NOTABLE_FORCE_VISIBLE) {
+    function hideTooltip(focus) {
+        if (window.CURRENT_TOOLTIP_ELEMENT) {
+            if (window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE.TOOLTIP_FORCE_VISIBLE) {
                if (focus) {
-                    window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.focus();
+                    window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE.focus();
                }
-                window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.NOTABLE_FORCE_VISIBLE = false;
+                window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE.TOOLTIP_FORCE_VISIBLE = false;
            }
            const body = document.getElementsByTagName("body")[0];
-            body.removeChild(window.CURRENT_NOTABLE_ELEMENT);
-            window.CURRENT_NOTABLE_ELEMENT = null;
+            body.removeChild(window.CURRENT_TOOLTIP_ELEMENT);
+            window.CURRENT_TOOLTIP_ELEMENT = null;
        }
    }

-    onEachLazy(document.getElementsByClassName("notable-traits"), e => {
+    onEachLazy(document.getElementsByClassName("tooltip"), e => {
        e.onclick = function() {
-            this.NOTABLE_FORCE_VISIBLE = this.NOTABLE_FORCE_VISIBLE ? false : true;
-            if (window.CURRENT_NOTABLE_ELEMENT && !this.NOTABLE_FORCE_VISIBLE) {
-                hideNotable(true);
+            this.TOOLTIP_FORCE_VISIBLE = this.TOOLTIP_FORCE_VISIBLE ? false : true;
+            if (window.CURRENT_TOOLTIP_ELEMENT && !this.TOOLTIP_FORCE_VISIBLE) {
+                hideTooltip(true);
            } else {
-                showNotable(this);
-                window.CURRENT_NOTABLE_ELEMENT.setAttribute("tabindex", "0");
-                window.CURRENT_NOTABLE_ELEMENT.focus();
-                window.CURRENT_NOTABLE_ELEMENT.onblur = notableBlurHandler;
+                showTooltip(this);
+                window.CURRENT_TOOLTIP_ELEMENT.setAttribute("tabindex", "0");
+                window.CURRENT_TOOLTIP_ELEMENT.focus();
+                window.CURRENT_TOOLTIP_ELEMENT.onblur = tooltipBlurHandler;
            }
            return false;
        };
@ -928,16 +936,16 @@ function loadCss(cssUrl) {
            if (ev.pointerType !== "mouse") {
                return;
            }
-            showNotable(this);
+            showTooltip(this);
        };
        e.onpointerleave = function(ev) {
            // If this is a synthetic touch event, ignore it. A click event will be along shortly.
            if (ev.pointerType !== "mouse") {
                return;
            }
-            if (!this.NOTABLE_FORCE_VISIBLE &&
-                !elemIsInParent(ev.relatedTarget, window.CURRENT_NOTABLE_ELEMENT)) {
-                hideNotable(true);
+            if (!this.TOOLTIP_FORCE_VISIBLE &&
+                !elemIsInParent(ev.relatedTarget, window.CURRENT_TOOLTIP_ELEMENT)) {
+                hideTooltip(true);
            }
        };
    });
@ -1039,14 +1047,14 @@ function loadCss(cssUrl) {
    }

    /**
-     * Hide popover menus, notable trait tooltips, and the sidebar (if applicable).
+     * Hide popover menus, clickable tooltips, and the sidebar (if applicable).
     *
-     * Pass "true" to reset focus for notable traits.
+     * Pass "true" to reset focus for tooltip popovers.
     */
    window.hideAllModals = function(switchFocus) {
        hideSidebar();
        window.hidePopoverMenus();
-        hideNotable(switchFocus);
+        hideTooltip(switchFocus);
    };

    /**
--- a/tests/rustdoc-gui/codeblock-tooltip.goml
+++ b/tests/rustdoc-gui/codeblock-tooltip.goml
@ -30,24 +30,16 @@ define-function: (
            ".docblock .example-wrap.compile_fail",
            {"border-left": "2px solid rgb(255, 0, 0)"},
        )
-        assert-css: (
-            ".docblock .example-wrap.compile_fail .tooltip::after",
-            {
-                "content": '"This example deliberately fails to compile"',
-                "padding": "5px 3px 3px",
-                "background-color": |background|,
-                "color": |color|,
-                "border": "1px solid " + |border|,
-            },
-        )
-        assert-css: (
-            ".docblock .example-wrap.compile_fail .tooltip::before",
-            {
-                "border-width": "5px",
-                "border-style": "solid",
-                "border-color": "rgba(0, 0, 0, 0) " + |background| + " rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)",
-            },
+        click: ".docblock .example-wrap.compile_fail .tooltip"
+        assert-text: (
+            ".popover.tooltip",
+            "This example deliberately fails to compile"
        )
+        assert-css: (".popover.tooltip", {
+            "color": |color|,
+            "background-color": |background|,
+            "border-color": |border|,
+        })

        // should_panic block
        assert-css: (
@ -69,24 +61,16 @@ define-function: (
            ".docblock .example-wrap.should_panic",
            {"border-left": "2px solid rgb(255, 0, 0)"},
        )
-        assert-css: (
-            ".docblock .example-wrap.should_panic .tooltip::after",
-            {
-                "content": '"This example panics"',
-                "padding": "5px 3px 3px",
-                "background-color": |background|,
-                "color": |color|,
-                "border": "1px solid " + |border|,
-            },
-        )
-        assert-css: (
-            ".docblock .example-wrap.should_panic .tooltip::before",
-            {
-                "border-width": "5px",
-                "border-style": "solid",
-                "border-color": "rgba(0, 0, 0, 0) " + |background| + " rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)",
-            },
+        click: ".docblock .example-wrap.should_panic .tooltip"
+        assert-text: (
+            ".popover.tooltip",
+            "This example panics"
        )
+        assert-css: (".popover.tooltip", {
+            "color": |color|,
+            "background-color": |background|,
+            "border-color": |border|,
+        })

        // ignore block
        assert-css: (
@ -108,42 +92,36 @@ define-function: (
            ".docblock .example-wrap.ignore",
            {"border-left": "2px solid rgb(255, 142, 0)"},
        )
-        assert-css: (
-            ".docblock .example-wrap.ignore .tooltip::after",
-            {
-                "content": '"This example is not tested"',
-                "padding": "5px 3px 3px",
-                "background-color": |background|,
-                "color": |color|,
-                "border": "1px solid " + |border|,
-            },
-        )
-        assert-css: (
-            ".docblock .example-wrap.ignore .tooltip::before",
-            {
-                "border-width": "5px",
-                "border-style": "solid",
-                "border-color": "rgba(0, 0, 0, 0) " + |background| + " rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)",
-            },
+        click: ".docblock .example-wrap.ignore .tooltip"
+        assert-text: (
+            ".popover.tooltip",
+            "This example is not tested"
        )
+        assert-css: (".popover.tooltip", {
+            "color": |color|,
+            "background-color": |background|,
+            "border-color": |border|,
+        })
+        click: ".docblock .example-wrap.ignore .tooltip"
+        assert-false: ".popover.tooltip"
    },
 )

 call-function: ("check-colors", {
    "theme": "ayu",
-    "background": "rgb(49, 69, 89)",
+    "background": "rgb(15, 20, 25)",
    "color": "rgb(197, 197, 197)",
    "border": "rgb(92, 103, 115)",
 })
 call-function: ("check-colors", {
    "theme": "dark",
-    "background": "rgb(0, 0, 0)",
-    "color": "rgb(255, 255, 255)",
+    "background": "rgb(53, 53, 53)",
+    "color": "rgb(221, 221, 221)",
    "border": "rgb(224, 224, 224)",
 })
 call-function: ("check-colors", {
    "theme": "light",
-    "background": "rgb(0, 0, 0)",
-    "color": "rgb(255, 255, 255)",
+    "background": "rgb(255, 255, 255)",
+    "color": "rgb(0, 0, 0)",
    "border": "rgb(224, 224, 224)",
 })
--- a/tests/rustdoc-gui/notable-trait.goml
+++ b/tests/rustdoc-gui/notable-trait.goml
@ -6,13 +6,13 @@ size: (1100, 600)
 // Checking they have the same y position.
 compare-elements-position: (
    "//*[@id='method.create_an_iterator_from_read']//a[text()='NotableStructWithLongName']",
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']",
    ("y"),
 )
 // Checking they don't have the same x position.
 compare-elements-position-false: (
    "//*[@id='method.create_an_iterator_from_read']//a[text()='NotableStructWithLongName']",
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']",
    ("x"),
 )
 // The `i` should be *after* the type.
@ -21,33 +21,33 @@ assert-position: (
    {"x": 677},
 )
 assert-position: (
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']",
    {"x": 955},
 )
 // The tooltip should be below the `i`
 // Also, clicking the tooltip should bring its text into the DOM
-assert-count: ("//*[@class='notable popover']", 0)
-click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
-assert-count: ("//*[@class='notable popover']", 1)
+assert-count: ("//*[@class='tooltip popover']", 0)
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']"
+assert-count: ("//*[@class='tooltip popover']", 1)
 compare-elements-position-near: (
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
-    "//*[@class='notable popover']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']",
+    "//*[@class='tooltip popover']",
    {"y": 30}
 )
 compare-elements-position-false: (
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
-    "//*[@class='notable popover']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']",
+    "//*[@class='tooltip popover']",
    ("x")
 )
-click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']"
 move-cursor-to: "//h1"
-assert-count: ("//*[@class='notable popover']", 0)
+assert-count: ("//*[@class='tooltip popover']", 0)

 // Now only the `i` should be on the next line.
 size: (1055, 600)
 compare-elements-position-false: (
    "//*[@id='method.create_an_iterator_from_read']//a[text()='NotableStructWithLongName']",
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']",
    ("y", "x"),
 )

@ -56,13 +56,13 @@ size: (980, 600)
 // Checking they have the same y position.
 compare-elements-position: (
    "//*[@id='method.create_an_iterator_from_read']//a[text()='NotableStructWithLongName']",
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']",
    ("y"),
 )
 // Checking they don't have the same x position.
 compare-elements-position-false: (
    "//*[@id='method.create_an_iterator_from_read']//a[text()='NotableStructWithLongName']",
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']",
    ("x"),
 )
 // The `i` should be *after* the type.
@ -71,7 +71,7 @@ assert-position: (
    {"x": 245},
 )
 assert-position: (
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']",
    {"x": 523},
 )

@ -80,13 +80,13 @@ size: (650, 600)
 // Checking they have the same y position.
 compare-elements-position: (
    "//*[@id='method.create_an_iterator_from_read']//a[text()='NotableStructWithLongName']",
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']",
    ("y"),
 )
 // Checking they don't have the same x position.
 compare-elements-position-false: (
    "//*[@id='method.create_an_iterator_from_read']//a[text()='NotableStructWithLongName']",
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']",
    ("x"),
 )
 // The `i` should be *after* the type.
@ -95,29 +95,29 @@ assert-position: (
    {"x": 15},
 )
 assert-position: (
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']",
    {"x": 293},
 )
 // The tooltip should STILL be below `i`
-click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
-assert-count: ("//*[@class='notable popover']", 1)
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']"
+assert-count: ("//*[@class='tooltip popover']", 1)
 compare-elements-position-near: (
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
-    "//*[@class='notable popover']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']",
+    "//*[@class='tooltip popover']",
    {"y": 30}
 )
 compare-elements-position-false: (
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
-    "//*[@class='notable popover']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']",
+    "//*[@class='tooltip popover']",
    ("x")
 )
 assert-position: (
-    "//*[@class='notable popover']",
+    "//*[@class='tooltip popover']",
    {"x": 0}
 )
-click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']"
 move-cursor-to: "//h1"
-assert-count: ("//*[@class='notable popover']", 0)
+assert-count: ("//*[@class='tooltip popover']", 0)

 // Now check the colors.
 define-function: (
@ -133,26 +133,26 @@ define-function: (
        // We reload the page so the local storage settings are being used.
        reload:

-        move-cursor-to: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
-        assert-count: (".notable.popover", 1)
+        move-cursor-to: "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']"
+        assert-count: (".tooltip.popover", 1)

        assert-css: (
-             ".notable.popover h3",
+             ".tooltip.popover h3",
             {"color": |header_color|},
             ALL,
        )
        assert-css: (
-             ".notable.popover pre",
+             ".tooltip.popover pre",
             {"color": |content_color|},
             ALL,
        )
        assert-css: (
-             ".notable.popover pre a.struct",
+             ".tooltip.popover pre a.struct",
             {"color": |type_color|},
             ALL,
        )
        assert-css: (
-             ".notable.popover pre a.trait",
+             ".tooltip.popover pre a.trait",
             {"color": |trait_color|},
             ALL,
        )
@ -195,24 +195,24 @@ call-function: (
 reload:

 // Check that pressing escape works
-click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
-move-cursor-to: "//*[@class='notable popover']"
-assert-count: ("//*[@class='notable popover']", 1)
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']"
+move-cursor-to: "//*[@class='tooltip popover']"
+assert-count: ("//*[@class='tooltip popover']", 1)
 press-key: "Escape"
-assert-count: ("//*[@class='notable popover']", 0)
-assert: "#method\.create_an_iterator_from_read .notable-traits:focus"
+assert-count: ("//*[@class='tooltip popover']", 0)
+assert: "#method\.create_an_iterator_from_read .tooltip:focus"

 // Check that clicking outside works.
-click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
-assert-count: ("//*[@class='notable popover']", 1)
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']"
+assert-count: ("//*[@class='tooltip popover']", 1)
 click: ".search-input"
-assert-count: ("//*[@class='notable popover']", 0)
-assert-false: "#method\.create_an_iterator_from_read .notable-traits:focus"
+assert-count: ("//*[@class='tooltip popover']", 0)
+assert-false: "#method\.create_an_iterator_from_read .tooltip:focus"

 // Check that pressing tab over and over works.
-click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
-move-cursor-to: "//*[@class='notable popover']"
-assert-count: ("//*[@class='notable popover']", 1)
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']"
+move-cursor-to: "//*[@class='tooltip popover']"
+assert-count: ("//*[@class='tooltip popover']", 1)
 press-key: "Tab"
 press-key: "Tab"
 press-key: "Tab"
@ -220,8 +220,8 @@ press-key: "Tab"
 press-key: "Tab"
 press-key: "Tab"
 press-key: "Tab"
-assert-count: ("//*[@class='notable popover']", 0)
-assert: "#method\.create_an_iterator_from_read .notable-traits:focus"
+assert-count: ("//*[@class='tooltip popover']", 0)
+assert: "#method\.create_an_iterator_from_read .tooltip:focus"

 // Now we check that the focus isn't given back to the wrong item when opening
 // another popover.
@ -231,8 +231,8 @@ click: "#method\.create_an_iterator_from_read .fn"
 assert-window-property-false: {"scrollY": |scroll|}
 // Store the new position.
 store-window-property: (scroll, "scrollY")
-click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
-wait-for: "//*[@class='notable popover']"
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']"
+wait-for: "//*[@class='tooltip popover']"
 click: "#settings-menu a"
 click: ".search-input"
 // We ensure we didn't come back to the previous focused item.
@ -245,8 +245,8 @@ click: "#method\.create_an_iterator_from_read .fn"
 assert-window-property-false: {"scrollY": |scroll|}
 // Store the new position.
 store-window-property: (scroll, "scrollY")
-click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
-wait-for: "//*[@class='notable popover']"
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']"
+wait-for: "//*[@class='tooltip popover']"
 click: "#settings-menu a"
 press-key: "Escape"
 // We ensure we didn't come back to the previous focused item.
@ -254,23 +254,23 @@ assert-window-property-false: {"scrollY": |scroll|}

 // Opening the mobile sidebar should close the popover.
 size: (650, 600)
-click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
-assert-count: ("//*[@class='notable popover']", 1)
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']"
+assert-count: ("//*[@class='tooltip popover']", 1)
 click: ".sidebar-menu-toggle"
 assert: "//*[@class='sidebar shown']"
-assert-count: ("//*[@class='notable popover']", 0)
-assert-false: "#method\.create_an_iterator_from_read .notable-traits:focus"
-// Clicking a notable popover should close the sidebar.
-click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
-assert-count: ("//*[@class='notable popover']", 1)
+assert-count: ("//*[@class='tooltip popover']", 0)
+assert-false: "#method\.create_an_iterator_from_read .tooltip:focus"
+// Clicking a notable trait tooltip popover should close the sidebar.
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']"
+assert-count: ("//*[@class='tooltip popover']", 1)
 assert-false: "//*[@class='sidebar shown']"

 // Also check the focus handling for the help button.
 size: (1100, 600)
 reload:
-assert-count: ("//*[@class='notable popover']", 0)
-click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
-assert-count: ("//*[@class='notable popover']", 1)
+assert-count: ("//*[@class='tooltip popover']", 0)
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']"
+assert-count: ("//*[@class='tooltip popover']", 1)
 click: "#help-button a"
-assert-count: ("//*[@class='notable popover']", 0)
-assert-false: "#method\.create_an_iterator_from_read .notable-traits:focus"
+assert-count: ("//*[@class='tooltip popover']", 0)
+assert-false: "#method\.create_an_iterator_from_read .tooltip:focus"
--- a/tests/rustdoc/codeblock-title.rs
+++ b/tests/rustdoc/codeblock-title.rs
@ -3,7 +3,7 @@
 // @has foo/fn.bar.html '//*[@class="example-wrap compile_fail"]/*[@class="tooltip"]' "ⓘ"
 // @has foo/fn.bar.html '//*[@class="example-wrap ignore"]/*[@class="tooltip"]' "ⓘ"
 // @has foo/fn.bar.html '//*[@class="example-wrap should_panic"]/*[@class="tooltip"]' "ⓘ"
-// @has foo/fn.bar.html '//*[@data-edition="2018"]' "ⓘ"
+// @has foo/fn.bar.html '//*[@title="This example runs with edition 2018"]' "ⓘ"

 /// foo
 ///
--- a/tests/rustdoc/doc-notable_trait.rs
+++ b/tests/rustdoc/doc-notable_trait.rs
@ -9,7 +9,7 @@ impl<T: SomeTrait> SomeTrait for Wrapper<T> {}
 #[doc(notable_trait)]
 pub trait SomeTrait {
    // @has doc_notable_trait/trait.SomeTrait.html
-    // @has - '//a[@class="notable-traits"]/@data-ty' 'Wrapper<Self>'
+    // @has - '//a[@class="tooltip"]/@data-notable-ty' 'Wrapper<Self>'
    // @snapshot wrap-me - '//script[@id="notable-traits-data"]'
    fn wrap_me(self) -> Wrapper<Self> where Self: Sized {
        Wrapper {
@ -23,7 +23,7 @@ impl SomeTrait for SomeStruct {}

 impl SomeStruct {
    // @has doc_notable_trait/struct.SomeStruct.html
-    // @has - '//a[@class="notable-traits"]/@data-ty' 'SomeStruct'
+    // @has - '//a[@class="tooltip"]/@data-notable-ty' 'SomeStruct'
    // @snapshot some-struct-new - '//script[@id="notable-traits-data"]'
    pub fn new() -> SomeStruct {
        SomeStruct
@ -31,7 +31,7 @@ impl SomeStruct {
 }

 // @has doc_notable_trait/fn.bare_fn.html
-// @has - '//a[@class="notable-traits"]/@data-ty' 'SomeStruct'
+// @has - '//a[@class="tooltip"]/@data-notable-ty' 'SomeStruct'
 // @snapshot bare-fn - '//script[@id="notable-traits-data"]'
 pub fn bare_fn() -> SomeStruct {
    SomeStruct
--- a/tests/rustdoc/spotlight-from-dependency.rs
+++ b/tests/rustdoc/spotlight-from-dependency.rs
@ -3,7 +3,7 @@
 use std::iter::Iterator;

 // @has foo/struct.Odd.html
-// @has - '//*[@id="method.new"]//a[@class="notable-traits"]/@data-ty' 'Odd'
+// @has - '//*[@id="method.new"]//a[@class="tooltip"]/@data-notable-ty' 'Odd'
 // @snapshot odd - '//script[@id="notable-traits-data"]'
 pub struct Odd {
    current: usize,