diff --git a/mods/tooltip.js b/mods/tooltip.js new file mode 100644 index 00000000..ddd4708e --- /dev/null +++ b/mods/tooltip.js @@ -0,0 +1,32 @@ +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", ()=>{ + 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", `
${ele.desc}
`); + if(ele.desc.includes("")) { + button.setAttribute("data-tippy-interactive", true); + } + } + }); + tippy("[data-tippy-content]", { + allowHTML: true, + duration: 0, + placement: "bottom" + }); +}