diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 2a156a3..dce1ef4 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -39,8 +39,8 @@ div#terminal { position: fixed; font-size: 13px; font-family: courier-new, courier, monospace; - border-radius: 3px; - padding: 3px; + border-radius: 5px; + padding: 5px; color: hsl(0, 0%, 0%); background-color: #fff; border: 1px solid #C8C8C8; diff --git a/frontend/src/terminal.ts b/frontend/src/terminal.ts index 85595d0..17a6b22 100644 --- a/frontend/src/terminal.ts +++ b/frontend/src/terminal.ts @@ -68,12 +68,21 @@ async function main() { } }, { hover: (_, text) => { - if (document.getElementById('tooltip')) { - document.getElementById('tooltip')!.remove(); + let tooltip = document.getElementById('tooltip'); + if (tooltip) { + if (tooltip.id === `${text}-tooltip`) { + return; + } + + if (tooltip.matches(':hover')) { + return; + } + tooltip.remove(); } - const tooltip = document.createElement('div'); - tooltip.id = 'tooltip'; + const tooltipId = `${text}-tooltip`; + tooltip = document.createElement('div'); + tooltip.id = tooltipId; tooltip.className = 'tooltip'; tooltip.style.position = 'fixed'; tooltip.innerHTML = `Follow link`; @@ -86,7 +95,7 @@ async function main() { // Add a delay of 1 second before showing the tooltip setTimeout(() => { // check if the tooltip still exists - const tooltip = document.getElementById('tooltip'); + const tooltip = document.getElementById(tooltipId); if (tooltip) { if (mouseX - tootlipSize.height > 0) { tooltip.style.top = `${mouseY - tootlipSize.height}px`; @@ -97,10 +106,10 @@ async function main() { tooltip.style.left = `${mouseX - tootlipSize.width / 2}px`; tooltip.style.visibility = 'visible'; } - }, 1500); + }, 1000); }, - leave: () => { - const tooltip = document.getElementById('tooltip'); + leave: (_, text) => { + const tooltip = document.getElementById(`${text}-tooltip`); if (tooltip && !tooltip.matches(':hover')) { tooltip.remove(); return