diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 2ae76f628d2..5ec2fe47e01 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -1159,6 +1159,8 @@ pre.rust .doccomment {
width: max-content;
top: -2px;
z-index: 1;
+ background-color: var(--tooltip-background-color);
+ color: var(--tooltip-color);
}
.example-wrap .tooltip::before {
@@ -1167,10 +1169,10 @@ pre.rust .doccomment {
top: 50%;
left: 16px;
margin-top: -5px;
- border-width: 5px;
- border-style: solid;
display: none;
z-index: 1;
+ border: 5px solid transparent;
+ border-right-color: var(--tooltip-background-color);
}
.example-wrap.ignore .tooltip::after {
diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
index db311bccd6d..0e4dacb28f7 100644
--- a/src/librustdoc/html/static/css/themes/ayu.css
+++ b/src/librustdoc/html/static/css/themes/ayu.css
@@ -65,6 +65,8 @@ 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;
--rust-logo-filter: drop-shadow(1px 0 0px #fff)
drop-shadow(0 1px 0 #fff)
drop-shadow(-1px 0 0 #fff)
@@ -160,15 +162,6 @@ details.rustdoc-toggle > summary::before {
color: #788797;
}
-.tooltip::after {
- background-color: #314559;
- color: #c5c5c5;
-}
-
-.tooltip::before {
- border-color: transparent #314559 transparent transparent;
-}
-
#titles > button.selected {
background-color: #141920 !important;
border-bottom: 1px solid #ffb44c !important;
diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
index b2f2c77f547..8e00591179f 100644
--- a/src/librustdoc/html/static/css/themes/dark.css
+++ b/src/librustdoc/html/static/css/themes/dark.css
@@ -60,6 +60,8 @@
--test-arrow-hover-background-color: #4e8bca;
--target-background-color: #494a3d;
--target-border-color: #bb7410;
+ --tooltip-background-color: #000;
+ --tooltip-color: #fff;
--rust-logo-filter: drop-shadow(1px 0 0px #fff)
drop-shadow(0 1px 0 #fff)
drop-shadow(-1px 0 0 #fff)
@@ -82,16 +84,6 @@ details.rustdoc-toggle > summary::before {
filter: invert(100%);
}
-.tooltip::after {
- background-color: #000;
- color: #fff;
- border-color: #000;
-}
-
-.tooltip::before {
- border-color: transparent black transparent transparent;
-}
-
#titles > button:not(.selected) {
background-color: #252525;
border-top-color: #252525;
diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
index e8132795688..e23e3682b16 100644
--- a/src/librustdoc/html/static/css/themes/light.css
+++ b/src/librustdoc/html/static/css/themes/light.css
@@ -58,8 +58,10 @@
--test-arrow-background-color: rgba(78, 139, 202, 0.2);
--test-arrow-hover-color: #f5f5f5;
--test-arrow-hover-background-color: #4e8bca;
- --target-background-color: #fdFfd3;
+ --target-background-color: #fdffd3;
--target-border-color: #ad7c37;
+ --tooltip-background-color: #fdffd3;
+ --tooltip-color: #fff;
--rust-logo-filter: initial;
/* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
--crate-search-div-filter: invert(100%) sepia(0%) saturate(4223%) hue-rotate(289deg)
@@ -75,15 +77,6 @@ body.source .example-wrap pre.rust a {
background: #eee;
}
-.tooltip::after {
- background-color: #000;
- color: #fff;
-}
-
-.tooltip::before {
- border-color: transparent black transparent transparent;
-}
-
#titles > button:not(.selected) {
background-color: #e6e6e6;
border-top-color: #e6e6e6;
diff --git a/src/test/rustdoc-gui/codeblock-tooltip.goml b/src/test/rustdoc-gui/codeblock-tooltip.goml
index 8e681a2a0c3..caa1ab8f31e 100644
--- a/src/test/rustdoc-gui/codeblock-tooltip.goml
+++ b/src/test/rustdoc-gui/codeblock-tooltip.goml
@@ -4,7 +4,7 @@ show-text: true
define-function: (
"check-colors",
- (theme),
+ (theme, background, color, border),
[
// Setting the theme.
("local-storage", {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}),
@@ -30,6 +30,25 @@ 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"',
+ "text-align": "center",
+ "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)",
+ },
+ )),
// should_panic block
("assert-css", (
@@ -51,6 +70,25 @@ 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"',
+ "text-align": "center",
+ "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)",
+ },
+ )),
// ignore block
("assert-css", (
@@ -72,9 +110,43 @@ 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"',
+ "text-align": "center",
+ "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)",
+ },
+ )),
],
)
-call-function: ("check-colors", ("ayu"))
-call-function: ("check-colors", ("dark"))
-call-function: ("check-colors", ("light"))
+call-function: ("check-colors", {
+ "theme": "ayu",
+ "background": "rgb(49, 69, 89)",
+ "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)",
+ "border": "rgb(224, 224, 224)",
+})
+call-function: ("check-colors", {
+ "theme": "light",
+ "background": "rgb(253, 255, 211)",
+ "color": "rgb(255, 255, 255)",
+ "border": "rgb(224, 224, 224)",
+})