Move tooltips messages to CSS instead of inside HTML
This commit is contained in:
parent
c7cff213e9
commit
db8ddbf570
6 changed files with 47 additions and 65 deletions
|
@ -11,6 +11,7 @@ use std::fmt::{Display, Write};
|
|||
use std::iter::Peekable;
|
||||
|
||||
use rustc_lexer::{LiteralKind, TokenKind};
|
||||
use rustc_span::edition::Edition;
|
||||
use rustc_span::symbol::Ident;
|
||||
use rustc_span::with_default_session_globals;
|
||||
|
||||
|
@ -19,16 +20,20 @@ crate fn render_with_highlighting(
|
|||
src: String,
|
||||
class: Option<&str>,
|
||||
playground_button: Option<&str>,
|
||||
tooltip: Option<(&str, &str)>,
|
||||
tooltip: Option<(Option<Edition>, &str)>,
|
||||
) -> String {
|
||||
debug!("highlighting: ================\n{}\n==============", src);
|
||||
let mut out = String::with_capacity(src.len());
|
||||
if let Some((tooltip, class)) = tooltip {
|
||||
if let Some((edition_info, class)) = tooltip {
|
||||
write!(
|
||||
out,
|
||||
"<div class='information'><div class='tooltip {}'>ⓘ<span \
|
||||
class='tooltiptext'>{}</span></div></div>",
|
||||
class, tooltip
|
||||
"<div class='information'><div class='tooltip {}'{}>ⓘ</div></div>",
|
||||
class,
|
||||
if let Some(edition_info) = edition_info {
|
||||
format!(" edition=\"{}\"", edition_info)
|
||||
} else {
|
||||
String::new()
|
||||
},
|
||||
)
|
||||
.unwrap();
|
||||
}
|
||||
|
|
|
@ -286,60 +286,27 @@ impl<'a, I: Iterator<Item = Event<'a>>> Iterator for CodeBlocks<'_, 'a, I> {
|
|||
});
|
||||
|
||||
let tooltip = if ignore != Ignore::None {
|
||||
Some(("This example is not tested".to_owned(), "ignore"))
|
||||
Some((None, "ignore"))
|
||||
} else if compile_fail {
|
||||
Some(("This example deliberately fails to compile".to_owned(), "compile_fail"))
|
||||
Some((None, "compile_fail"))
|
||||
} else if should_panic {
|
||||
Some(("This example panics".to_owned(), "should_panic"))
|
||||
Some((None, "should_panic"))
|
||||
} else if explicit_edition {
|
||||
Some((format!("This code runs with edition {}", edition), "edition"))
|
||||
Some((Some(edition), "edition"))
|
||||
} else {
|
||||
None
|
||||
};
|
||||
|
||||
if let Some((s1, s2)) = tooltip {
|
||||
s.push_str(&highlight::render_with_highlighting(
|
||||
text,
|
||||
Some(&format!(
|
||||
"rust-example-rendered{}",
|
||||
if ignore != Ignore::None {
|
||||
" ignore"
|
||||
} else if compile_fail {
|
||||
" compile_fail"
|
||||
} else if should_panic {
|
||||
" should_panic"
|
||||
} else if explicit_edition {
|
||||
" edition "
|
||||
} else {
|
||||
""
|
||||
}
|
||||
if let Some((_, class)) = tooltip { format!(" {}", class) } else { String::new() }
|
||||
)),
|
||||
playground_button.as_deref(),
|
||||
Some((s1.as_str(), s2)),
|
||||
tooltip,
|
||||
));
|
||||
Some(Event::Html(s.into()))
|
||||
} else {
|
||||
s.push_str(&highlight::render_with_highlighting(
|
||||
text,
|
||||
Some(&format!(
|
||||
"rust-example-rendered{}",
|
||||
if ignore != Ignore::None {
|
||||
" ignore"
|
||||
} else if compile_fail {
|
||||
" compile_fail"
|
||||
} else if should_panic {
|
||||
" should_panic"
|
||||
} else if explicit_edition {
|
||||
" edition "
|
||||
} else {
|
||||
""
|
||||
}
|
||||
)),
|
||||
playground_button.as_deref(),
|
||||
None,
|
||||
));
|
||||
Some(Event::Html(s.into()))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1079,20 +1079,29 @@ h3 > .collapse-toggle, h4 > .collapse-toggle {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
width: 120px;
|
||||
.tooltip::after {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 5px 3px 3px 3px;
|
||||
border-radius: 6px;
|
||||
margin-left: 5px;
|
||||
top: -5px;
|
||||
left: 105%;
|
||||
z-index: 10;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext::after {
|
||||
.tooltip.ignore::after {
|
||||
content: "This example is not tested";
|
||||
}
|
||||
.tooltip.compile_fail::after {
|
||||
content: "This example deliberately fails to compile";
|
||||
}
|
||||
.tooltip.should_panic::after {
|
||||
content: "This example panics";
|
||||
}
|
||||
.tooltip.edition::after {
|
||||
content: "This code runs with edition " attr(edition);
|
||||
}
|
||||
|
||||
.tooltip::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
@ -1100,9 +1109,10 @@ h3 > .collapse-toggle, h4 > .collapse-toggle {
|
|||
margin-top: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
.tooltip:hover::before, .tooltip:hover::after {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
|
|
@ -388,13 +388,13 @@ pre.ignore:hover, .information:hover + pre.ignore {
|
|||
color: #39AFD7;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
.tooltip::after {
|
||||
background-color: #314559;
|
||||
color: #c5c5c5;
|
||||
border: 1px solid #5c6773;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext::after {
|
||||
.tooltip::before {
|
||||
border-color: transparent #314559 transparent transparent;
|
||||
}
|
||||
|
||||
|
|
|
@ -337,13 +337,13 @@ pre.ignore:hover, .information:hover + pre.ignore {
|
|||
color: #0089ff;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
.tooltip::after {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext::after {
|
||||
.tooltip::before {
|
||||
border-color: transparent black transparent transparent;
|
||||
}
|
||||
|
||||
|
|
|
@ -329,12 +329,12 @@ pre.ignore:hover, .information:hover + pre.ignore {
|
|||
color: #0089ff;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
.tooltip::after {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext::after {
|
||||
.tooltip::before {
|
||||
border-color: transparent black transparent transparent;
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue