From 09102d5efa0b05d53200a0678dceb772bee1562d Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Wed, 1 Dec 2021 20:32:40 +0100 Subject: [PATCH 1/2] Handle notable trait popup differently --- src/librustdoc/html/format.rs | 4 - src/librustdoc/html/markdown.rs | 2 + src/librustdoc/html/render/context.rs | 43 ++++++++++- src/librustdoc/html/render/mod.rs | 55 +++++++++----- src/librustdoc/html/static/css/rustdoc.css | 14 +--- src/librustdoc/html/static/css/themes/ayu.css | 4 +- .../html/static/css/themes/dark.css | 4 +- .../html/static/css/themes/light.css | 4 +- src/librustdoc/html/static/js/main.js | 75 ++++++++++++++++--- 9 files changed, 152 insertions(+), 53 deletions(-) diff --git a/src/librustdoc/html/format.rs b/src/librustdoc/html/format.rs index a3cbb5756fefc..da480ed7d887f 100644 --- a/src/librustdoc/html/format.rs +++ b/src/librustdoc/html/format.rs @@ -79,10 +79,6 @@ impl Buffer { self.buffer } - crate fn insert_str(&mut self, idx: usize, s: &str) { - self.buffer.insert_str(idx, s); - } - crate fn push_str(&mut self, s: &str) { self.buffer.push_str(s); } diff --git a/src/librustdoc/html/markdown.rs b/src/librustdoc/html/markdown.rs index 545b409175ee6..2ff8d68893f8c 100644 --- a/src/librustdoc/html/markdown.rs +++ b/src/librustdoc/html/markdown.rs @@ -1439,6 +1439,8 @@ fn init_id_map() -> FxHashMap { let mut map = FxHashMap::default(); // This is the list of IDs used in Javascript. map.insert("help".to_owned(), 1); + // This is the ID used to generate the notable traits popup in Javascript. + map.insert("notable-traits-tooltiptext".to_owned(), 1); // This is the list of IDs used in HTML generated in Rust (including the ones // used in tera template files). map.insert("mainThemeStyle".to_owned(), 1); diff --git a/src/librustdoc/html/render/context.rs b/src/librustdoc/html/render/context.rs index 365d959ad9f3b..e53b48ab36113 100644 --- a/src/librustdoc/html/render/context.rs +++ b/src/librustdoc/html/render/context.rs @@ -129,6 +129,9 @@ crate struct SharedContext<'tcx> { crate cache: Cache, crate call_locations: AllCallLocations, + /// The key is the notable trait text and the value is its index (we add it in the DOM so the + /// JS knows which notable trait to pick). + crate notable_traits: RefCell>, } impl SharedContext<'_> { @@ -369,6 +372,34 @@ impl<'tcx> Context<'tcx> { anchor = anchor )) } + + fn generate_notable_trait_index(&self, crate_name: &str) -> Result<(), Error> { + let notable_traits = self.shared.notable_traits.borrow(); + if !notable_traits.is_empty() { + // This is crate specific. + let notable_traits_file = self.dst.join(crate_name).join("notable-traits.js"); + let out = "window.NOTABLE_TRAITS = [".to_owned(); + + // We need to put them back into a vec to sort them by their index. + let mut notables = notable_traits.iter().collect::>(); + notables.sort_by(|(_, pos1), (_, pos2)| pos1.cmp(pos2)); + + let mut out = notables.into_iter().fold(out, |mut acc, ((for_, content), pos)| { + if *pos > 0 { + acc.push(','); + } + acc.push_str(&format!( + "[\"{}\",\"{}\"]", + for_.replace("\"", "\\\""), + content.replace("\\", "\\\\").replace("\"", "\\\""), + )); + acc + }); + out.push_str("];"); + self.shared.fs.write(notable_traits_file, out)?; + } + Ok(()) + } } /// Generates the documentation for `crate` into the directory `dst` @@ -493,6 +524,7 @@ impl<'tcx> FormatRenderer<'tcx> for Context<'tcx> { span_correspondance_map: matches, cache, call_locations, + notable_traits: RefCell::new(Default::default()), }; // Add the default themes to the `Vec` of stylepaths @@ -549,9 +581,13 @@ impl<'tcx> FormatRenderer<'tcx> for Context<'tcx> { fn after_krate(&mut self) -> Result<(), Error> { let crate_name = self.tcx().crate_name(LOCAL_CRATE); - let final_file = self.dst.join(&*crate_name.as_str()).join("all.html"); + let crate_name = crate_name.as_str(); + let crate_name: &str = &*crate_name; + let final_file = self.dst.join(crate_name).join("all.html"); let settings_file = self.dst.join("settings.html"); + self.generate_notable_trait_index(crate_name)?; + let mut root_path = self.dst.to_str().expect("invalid path").to_owned(); if !root_path.ends_with('/') { root_path.push('/'); @@ -618,10 +654,9 @@ impl<'tcx> FormatRenderer<'tcx> for Context<'tcx> { self.shared.fs.write(settings_file, v)?; if let Some(ref redirections) = self.shared.redirections { if !redirections.borrow().is_empty() { - let redirect_map_path = - self.dst.join(&*crate_name.as_str()).join("redirect-map.json"); + let redirect_map_path = self.dst.join(crate_name).join("redirect-map.json"); let paths = serde_json::to_string(&*redirections.borrow()).unwrap(); - self.shared.ensure_dir(&self.dst.join(&*crate_name.as_str()))?; + self.shared.ensure_dir(&self.dst.join(crate_name))?; self.shared.fs.write(redirect_map_path, paths)?; } } diff --git a/src/librustdoc/html/render/mod.rs b/src/librustdoc/html/render/mod.rs index 166e084012724..2ee6afab2655c 100644 --- a/src/librustdoc/html/render/mod.rs +++ b/src/librustdoc/html/render/mod.rs @@ -37,6 +37,7 @@ mod write_shared; crate use self::context::*; crate use self::span_map::{collect_spans_and_sources, LinkFromSrc}; +use std::collections::hash_map::Entry; use std::collections::VecDeque; use std::default::Default; use std::fmt; @@ -1241,7 +1242,8 @@ fn should_render_item(item: &clean::Item, deref_mut_: bool, tcx: TyCtxt<'_>) -> } fn notable_traits_decl(decl: &clean::FnDecl, cx: &Context<'_>) -> String { - let mut out = Buffer::html(); + let mut out_for = Buffer::html(); + let mut out_content = Buffer::html(); if let Some((did, ty)) = decl.output.as_return().and_then(|t| Some((t.def_id(cx.cache())?, t))) { @@ -1258,29 +1260,38 @@ fn notable_traits_decl(decl: &clean::FnDecl, cx: &Context<'_>) -> String { let trait_did = trait_.def_id(); if cx.cache().traits.get(&trait_did).map_or(false, |t| t.is_notable) { - if out.is_empty() { + if out_for.is_empty() { write!( - &mut out, - "
Notable traits for {}
\ - ", - impl_.for_.print(cx) + &mut out_for, + "{}", + impl_.for_.print(cx), + // "
Notable traits for {}
\ + // ", ); } //use the "where" class here to make it small write!( - &mut out, + &mut out_content, "{}", impl_.print(false, cx) ); for it in &impl_.items { if let clean::TypedefItem(ref tydef, _) = *it.kind { - out.push_str(" "); + out_content.push_str(" "); let empty_set = FxHashSet::default(); let src_link = AssocItemLink::GotoSource(trait_did.into(), &empty_set); - assoc_type(&mut out, it, &[], Some(&tydef.type_), src_link, "", cx); - out.push_str(";"); + assoc_type( + &mut out_content, + it, + &[], + Some(&tydef.type_), + src_link, + "", + cx, + ); + out_content.push_str(";"); } } } @@ -1289,16 +1300,26 @@ fn notable_traits_decl(decl: &clean::FnDecl, cx: &Context<'_>) -> String { } } - if !out.is_empty() { - out.insert_str( - 0, - "ⓘ\ -
", + if !out_for.is_empty() && !out_content.is_empty() { + let mut notable_traits = cx.shared.notable_traits.borrow_mut(); + + let out_for = out_for.into_inner(); + let out_content = out_content.into_inner(); + let nb_notable = notable_traits.len(); + let index = match notable_traits.entry((out_for, out_content)) { + Entry::Occupied(o) => *o.get(), + Entry::Vacant(v) => { + v.insert(nb_notable); + nb_notable + } + }; + return format!( + "ⓘ", + index ); - out.push_str("
"); } - out.into_inner() + String::new() } #[derive(Clone, Copy, Debug)] diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index cbb078f2ab377..b525fef796487 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1268,13 +1268,7 @@ h3.variant { cursor: pointer; } -.notable-traits:hover .notable-traits-tooltiptext, -.notable-traits .notable-traits-tooltiptext.force-tooltip { - display: inline-block; -} - -.notable-traits .notable-traits-tooltiptext { - display: none; +#notable-traits-tooltiptext { padding: 5px 3px 3px 3px; border-radius: 6px; margin-left: 5px; @@ -1296,14 +1290,14 @@ h3.variant { margin: 0; } -.notable-traits .notable { +#notable-traits-tooltiptext .notable { margin: 0; margin-bottom: 13px; font-size: 19px; font-weight: 600; } -.notable-traits .docblock code.content{ +#notable-traits-tooltiptext code.content{ margin: 0; padding: 0; font-size: 20px; @@ -1965,7 +1959,7 @@ details.rustdoc-toggle[open] > summary.hideme::after { margin-top: 0; } - .notable-traits .notable-traits-tooltiptext { + .notable-traits { left: 0; top: 100%; } diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index dea6d08396f31..5eba1a661762f 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -415,12 +415,12 @@ pre.ignore:hover, .information:hover + pre.ignore { border-color: transparent #314559 transparent transparent; } -.notable-traits-tooltiptext { +#notable-traits-tooltiptext { background-color: #314559; border-color: #5c6773; } -.notable-traits-tooltiptext .notable { +#notable-traits-tooltiptext .notable { border-bottom-color: #5c6773; } diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index 6e2cbbecbf712..11e77ed922be0 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -363,12 +363,12 @@ pre.ignore:hover, .information:hover + pre.ignore { border-color: transparent black transparent transparent; } -.notable-traits-tooltiptext { +#notable-traits-tooltiptext { background-color: #111; border-color: #777; } -.notable-traits-tooltiptext .notable { +#notable-traits-tooltiptext .notable { border-bottom-color: #d2d2d2; } diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index 4bf411d459a35..c8c898516e095 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -349,12 +349,12 @@ pre.ignore:hover, .information:hover + pre.ignore { border-color: transparent black transparent transparent; } -.notable-traits-tooltiptext { +#notable-traits-tooltiptext { background-color: #eee; border-color: #999; } -.notable-traits-tooltiptext .notable { +#notable-traits-tooltiptext .notable { border-bottom-color: #DDDDDD; } diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index 411a94ef2d1c1..a68a2c34bb970 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -171,6 +171,13 @@ function hideThemeButtonState() { (function() { "use strict"; + function loadScript(url, callback) { + var script = document.createElement('script'); + script.src = url; + script.onload = callback; + document.head.append(script); + } + window.searchState = { loadingText: "Loading search results...", input: document.getElementsByClassName("search-input")[0], @@ -254,11 +261,6 @@ function hideThemeButtonState() { if (!searchState.input) { return; } - function loadScript(url) { - var script = document.createElement('script'); - script.src = url; - document.head.append(script); - } var searchLoaded = false; function loadSearch() { @@ -910,13 +912,6 @@ function hideThemeButtonState() { }); }); - onEachLazy(document.getElementsByClassName("notable-traits"), function(e) { - e.onclick = function() { - this.getElementsByClassName('notable-traits-tooltiptext')[0] - .classList.toggle("force-tooltip"); - }; - }); - var sidebar_menu = document.getElementsByClassName("sidebar-menu")[0]; if (sidebar_menu) { sidebar_menu.onclick = function() { @@ -1010,6 +1005,62 @@ function hideThemeButtonState() { onHashChange(null); window.addEventListener("hashchange", onHashChange); searchState.setup(); + + // + // Handling the notable traits popup. + // + function getNotablePopup(callback) { + var elemId = "notable-traits-tooltiptext"; + var elem = document.getElementById(elemId); + + if (!elem) { + // If the element cannot be found, it means it hasn't been created yet and that the + // notable traits index wasn't loaded either. + var script = getVar("root-path") + window.currentCrate + "/notable-traits.js"; + loadScript(script, function() { + elem = document.createElement("code"); + elem.id = elemId; + elem.classList = "docblock"; + main.appendChild(elem); + callback(elem); + }); + return; + } + callback(elem); + } + function showNotableTraitPopup(elem) { + getNotablePopup(function(popup) { + if (elem === window.currentNotableElem) { + popup.style.display = "none"; + window.currentNotableElem = null; + return; + } + var elemRect = elem.getBoundingClientRect(); + var containerRect = main.getBoundingClientRect(); + + var index = elem.getAttribute("data-index"); + var notableTrait = window.NOTABLE_TRAITS[parseInt(index)]; + + popup.innerHTML = "
Notable traits for " + notableTrait[0] + "
" + notableTrait[1] + ""; + popup.style.top = (elemRect.top - containerRect.top) + "px"; + // In here, if the "i" is too much on the right, better put the popup on its left. + if (elem.offsetLeft > main.offsetWidth / 2) { + popup.style.left = ""; + popup.style.right = (main.offsetWidth - elem.offsetLeft + 2) + "px"; + } else { + popup.style.right = ""; + popup.style.left = (elem.offsetLeft + 12) + "px"; + } + popup.style.display = ""; + window.currentNotableElem = elem; + }); + } + + onEachLazy(document.getElementsByClassName("notable-traits-tooltip"), function(e) { + e.onclick = function() { + showNotableTraitPopup(this); + }; + }); }()); (function () { From e9edbf11ae97a1a4390b28cc6f6ee8e9e9a8aa96 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Thu, 16 Dec 2021 19:54:46 +0100 Subject: [PATCH 2/2] Put the notable popup in the current page DOM --- src/librustdoc/html/markdown.rs | 1 + src/librustdoc/html/render/context.rs | 30 ------- src/librustdoc/html/render/mod.rs | 4 +- src/librustdoc/html/render/print_item.rs | 17 ++++ src/librustdoc/html/static/css/rustdoc.css | 12 ++- src/librustdoc/html/static/css/themes/ayu.css | 4 +- .../html/static/css/themes/dark.css | 4 +- .../html/static/css/themes/light.css | 4 +- src/librustdoc/html/static/js/main.js | 81 +++++++------------ 9 files changed, 65 insertions(+), 92 deletions(-) diff --git a/src/librustdoc/html/markdown.rs b/src/librustdoc/html/markdown.rs index 2ff8d68893f8c..487cf2a59df3b 100644 --- a/src/librustdoc/html/markdown.rs +++ b/src/librustdoc/html/markdown.rs @@ -1460,6 +1460,7 @@ fn init_id_map() -> FxHashMap { map.insert("sidebar-vars".to_owned(), 1); map.insert("copy-path".to_owned(), 1); map.insert("TOC".to_owned(), 1); + map.insert("notable-traits".to_owned(), 1); // This is the list of IDs used by rustdoc sections (but still generated by // rustdoc). map.insert("fields".to_owned(), 1); diff --git a/src/librustdoc/html/render/context.rs b/src/librustdoc/html/render/context.rs index e53b48ab36113..7bc5ea494cada 100644 --- a/src/librustdoc/html/render/context.rs +++ b/src/librustdoc/html/render/context.rs @@ -372,34 +372,6 @@ impl<'tcx> Context<'tcx> { anchor = anchor )) } - - fn generate_notable_trait_index(&self, crate_name: &str) -> Result<(), Error> { - let notable_traits = self.shared.notable_traits.borrow(); - if !notable_traits.is_empty() { - // This is crate specific. - let notable_traits_file = self.dst.join(crate_name).join("notable-traits.js"); - let out = "window.NOTABLE_TRAITS = [".to_owned(); - - // We need to put them back into a vec to sort them by their index. - let mut notables = notable_traits.iter().collect::>(); - notables.sort_by(|(_, pos1), (_, pos2)| pos1.cmp(pos2)); - - let mut out = notables.into_iter().fold(out, |mut acc, ((for_, content), pos)| { - if *pos > 0 { - acc.push(','); - } - acc.push_str(&format!( - "[\"{}\",\"{}\"]", - for_.replace("\"", "\\\""), - content.replace("\\", "\\\\").replace("\"", "\\\""), - )); - acc - }); - out.push_str("];"); - self.shared.fs.write(notable_traits_file, out)?; - } - Ok(()) - } } /// Generates the documentation for `crate` into the directory `dst` @@ -586,8 +558,6 @@ impl<'tcx> FormatRenderer<'tcx> for Context<'tcx> { let final_file = self.dst.join(crate_name).join("all.html"); let settings_file = self.dst.join("settings.html"); - self.generate_notable_trait_index(crate_name)?; - let mut root_path = self.dst.to_str().expect("invalid path").to_owned(); if !root_path.ends_with('/') { root_path.push('/'); diff --git a/src/librustdoc/html/render/mod.rs b/src/librustdoc/html/render/mod.rs index 2ee6afab2655c..c7874dd625291 100644 --- a/src/librustdoc/html/render/mod.rs +++ b/src/librustdoc/html/render/mod.rs @@ -1265,8 +1265,8 @@ fn notable_traits_decl(decl: &clean::FnDecl, cx: &Context<'_>) -> String { &mut out_for, "{}", impl_.for_.print(cx), - // "
Notable traits for {}
\ - // ", + // "
Notable traits for {}
\ + // ", ); } diff --git a/src/librustdoc/html/render/print_item.rs b/src/librustdoc/html/render/print_item.rs index 9943e23b9281c..22c080c63985b 100644 --- a/src/librustdoc/html/render/print_item.rs +++ b/src/librustdoc/html/render/print_item.rs @@ -171,6 +171,23 @@ pub(super) fn print_item( unreachable!(); } } + // We now write down all the notable traits DOM in one place that will be used by JS after. + let mut notable_traits = cx.shared.notable_traits.borrow_mut(); + if !notable_traits.is_empty() { + let mut notables = notable_traits.drain().collect::>(); + notables.sort_by(|(_, pos1), (_, pos2)| pos1.cmp(pos2)); + buf.write_str("
"); + for notable in notables { + buf.write_str(&format!( + "
\ +
Notable traits for {}
\ + {}\ +
", + notable.0.0, notable.0.1 + )); + } + buf.write_str("
"); + } } /// For large structs, enums, unions, etc, determine whether to hide their fields diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index b525fef796487..ec1e239b0ac59 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1268,14 +1268,13 @@ h3.variant { cursor: pointer; } -#notable-traits-tooltiptext { +.notable-traits-tooltiptext { padding: 5px 3px 3px 3px; border-radius: 6px; margin-left: 5px; z-index: 10; font-size: 16px; cursor: default; - position: absolute; border: 1px solid; } @@ -1290,17 +1289,22 @@ h3.variant { margin: 0; } -#notable-traits-tooltiptext .notable { +.notable-traits-tooltiptext .notable { margin: 0; margin-bottom: 13px; font-size: 19px; font-weight: 600; } +#notable-traits .notable-traits-tooltiptext { + display: none; + position: absolute; +} -#notable-traits-tooltiptext code.content{ +.notable-traits-tooltiptext code.content{ margin: 0; padding: 0; font-size: 20px; + font-weight: 600; } /* Example code has the "Run" button that needs to be positioned relative to the pre */ diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index 5eba1a661762f..dea6d08396f31 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -415,12 +415,12 @@ pre.ignore:hover, .information:hover + pre.ignore { border-color: transparent #314559 transparent transparent; } -#notable-traits-tooltiptext { +.notable-traits-tooltiptext { background-color: #314559; border-color: #5c6773; } -#notable-traits-tooltiptext .notable { +.notable-traits-tooltiptext .notable { border-bottom-color: #5c6773; } diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index 11e77ed922be0..6e2cbbecbf712 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -363,12 +363,12 @@ pre.ignore:hover, .information:hover + pre.ignore { border-color: transparent black transparent transparent; } -#notable-traits-tooltiptext { +.notable-traits-tooltiptext { background-color: #111; border-color: #777; } -#notable-traits-tooltiptext .notable { +.notable-traits-tooltiptext .notable { border-bottom-color: #d2d2d2; } diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index c8c898516e095..4bf411d459a35 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -349,12 +349,12 @@ pre.ignore:hover, .information:hover + pre.ignore { border-color: transparent black transparent transparent; } -#notable-traits-tooltiptext { +.notable-traits-tooltiptext { background-color: #eee; border-color: #999; } -#notable-traits-tooltiptext .notable { +.notable-traits-tooltiptext .notable { border-bottom-color: #DDDDDD; } diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index a68a2c34bb970..6b0102ec19913 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -171,13 +171,6 @@ function hideThemeButtonState() { (function() { "use strict"; - function loadScript(url, callback) { - var script = document.createElement('script'); - script.src = url; - script.onload = callback; - document.head.append(script); - } - window.searchState = { loadingText: "Loading search results...", input: document.getElementsByClassName("search-input")[0], @@ -262,6 +255,12 @@ function hideThemeButtonState() { return; } + function loadScript(url) { + var script = document.createElement('script'); + script.src = url; + document.head.append(script); + } + var searchLoaded = false; function loadSearch() { if (!searchLoaded) { @@ -1009,51 +1008,33 @@ function hideThemeButtonState() { // // Handling the notable traits popup. // - function getNotablePopup(callback) { - var elemId = "notable-traits-tooltiptext"; - var elem = document.getElementById(elemId); - - if (!elem) { - // If the element cannot be found, it means it hasn't been created yet and that the - // notable traits index wasn't loaded either. - var script = getVar("root-path") + window.currentCrate + "/notable-traits.js"; - loadScript(script, function() { - elem = document.createElement("code"); - elem.id = elemId; - elem.classList = "docblock"; - main.appendChild(elem); - callback(elem); - }); + function showNotableTraitPopup(elem) { + if (elem === window.currentNotableElem) { + window.currentNotablePopup.style.display = ""; + window.currentNotableElem = null; return; + } else if (window.currentNotablePopup) { + window.currentNotablePopup.style.display = ""; } - callback(elem); - } - function showNotableTraitPopup(elem) { - getNotablePopup(function(popup) { - if (elem === window.currentNotableElem) { - popup.style.display = "none"; - window.currentNotableElem = null; - return; - } - var elemRect = elem.getBoundingClientRect(); - var containerRect = main.getBoundingClientRect(); - - var index = elem.getAttribute("data-index"); - var notableTrait = window.NOTABLE_TRAITS[parseInt(index)]; - - popup.innerHTML = "
Notable traits for " + notableTrait[0] + "
" + notableTrait[1] + ""; - popup.style.top = (elemRect.top - containerRect.top) + "px"; - // In here, if the "i" is too much on the right, better put the popup on its left. - if (elem.offsetLeft > main.offsetWidth / 2) { - popup.style.left = ""; - popup.style.right = (main.offsetWidth - elem.offsetLeft + 2) + "px"; - } else { - popup.style.right = ""; - popup.style.left = (elem.offsetLeft + 12) + "px"; - } - popup.style.display = ""; - window.currentNotableElem = elem; - }); + var elemRect = elem.getBoundingClientRect(); + var containerRect = main.getBoundingClientRect(); + + var index = elem.getAttribute("data-index"); + var notableTraitContainer = document.getElementById("notable-traits"); + var notable = notableTraitContainer.children[parseInt(index)]; + + notable.style.top = (elemRect.top - containerRect.top) + "px"; + // In here, if the "i" is too much on the right, better put the popup on its left. + if (elem.offsetLeft > main.offsetWidth / 2) { + notable.style.left = ""; + notable.style.right = (main.offsetWidth - elem.offsetLeft + 2) + "px"; + } else { + notable.style.right = ""; + notable.style.left = (elem.offsetLeft + 12) + "px"; + } + notable.style.display = "block"; + window.currentNotableElem = elem; + window.currentNotablePopup = notable; } onEachLazy(document.getElementsByClassName("notable-traits-tooltip"), function(e) {