commodore
/
sandboxels
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #112 from mollthecoder/main 

Brand new tooltip.js
This commit is contained in:
slweeb 2023-07-15 20:21:31 -04:00 committed by GitHub
parent 156e5b2c6e 73b26727ea
commit 1c944031d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
mods/oldTooltip.js Normal file
View File

@ -0,0 +1,23 @@
const defaultTooltip = "---";
let tooltipEle;
window.addEventListener("load", ()=>{
tooltipEle = document.createElement("p");
tooltipEle.innerHTML = defaultTooltip;
setTimeout(()=>{
document.getElementById("extraInfo").children[1].appendChild(tooltipEle);
let buttons = document.getElementsByClassName("elementButton");
[...buttons].forEach(button=>{
let ele = button.getAttribute("element");
button.addEventListener("mouseenter", e=>{
if(elements.hasOwnProperty(ele)) {
if(elements[ele].hasOwnProperty("desc")) {
tooltipEle.innerHTML = elements[ele].desc;
}
}
});
button.addEventListener("mouseleave", e=>{
tooltipEle.innerHTML = defaultTooltip;
});
});
});
});

51
mods/tooltip.js
View File

@ -1,23 +1,32 @@
const defaultTooltip = "---";
let tooltipEle;
const devMode = false;
// Tippy depends on popper
const popperUrl = devMode ? "https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js" : "https://unpkg.com/@popperjs/core@2";
const tippyUrl = devMode ? "https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js" : "https://unpkg.com/tippy.js@6";
window.addEventListener("load", ()=>{
tooltipEle = document.createElement("p");
tooltipEle.innerHTML = defaultTooltip;
setTimeout(()=>{
document.getElementById("extraInfo").children[1].appendChild(tooltipEle);
let buttons = document.getElementsByClassName("elementButton");
[...buttons].forEach(button=>{
let ele = button.getAttribute("element");
button.addEventListener("mouseenter", e=>{
if(elements.hasOwnProperty(ele)) {
if(elements[ele].hasOwnProperty("desc")) {
tooltipEle.innerHTML = elements[ele].desc;
}
}
});
button.addEventListener("mouseleave", e=>{
tooltipEle.innerHTML = defaultTooltip;
});
});
let popper = document.createElement("script");
popper.src = popperUrl;
popper.addEventListener("load", () => {
let tippyScr = document.createElement("script");
tippyScr.src = tippyUrl;
tippyScr.addEventListener("load", ()=>main(), {passive: true});
document.body.appendChild(tippyScr);
}, {passive: true});
document.body.appendChild(popper);
}, {passive: true});
function main() {
[...document.getElementsByClassName("elementButton")].forEach(button=>{
let ele = elements[button.getAttribute("element")];
// if(ele === undefined || ele === null) return;
if(ele.desc) {
button.setAttribute("data-tippy-content", `<div>${ele.desc}</div>`);
if(ele.desc.includes("<!--INTERACTIVE-->")) {
button.setAttribute("data-tippy-interactive", true);
}
}
});
});
tippy("[data-tippy-content]", {
allowHTML: true,
duration: 0,
placement: "bottom"
});
}