Improved tooltips

scripts/Elements/tool-tip/tool-tip.scarlet

@@ -0,0 +1,38 @@
+const tip-opacity = 1
+const tip-transform-hidden = translateY(20%)
+const tip-transform-visible = translateY(0)
+const tip-offset = -0.6rem
+
+tool-tip
+	position absolute
+	z-index 100000
+	opacity 0
+	transform tip-transform-hidden
+	transition opacity transition-speed ease, transform transition-speed ease
+	pointer-events none
+	margin-top tip-offset
+
+	[active="true"]
+		opacity tip-opacity
+		transform tip-transform-visible
+
+	.box
+		color text-color
+		text-shadow none
+		padding 0.6rem 0.8rem
+		background tip-bg-color
+		font-size 0.92rem
+		border 1px solid ui-border-color
+		border-radius ui-element-border-radius
+		box-shadow shadow-light
+		white-space nowrap
+
+	.arrow
+		position relative
+		width 6px
+		height 6px
+		margin-top -1px
+		transform translateX(-50%)
+		border-style solid
+		border-width 6px 6px 0 6px
+		border-color tip-bg-color transparent transparent transparent

scripts/Elements/tool-tip/tool-tip.ts

@@ -0,0 +1,60 @@
+import Diff from "scripts/Diff"
+
+export default class ToolTip extends HTMLElement {
+	anchor: HTMLElement
+	box: HTMLElement
+	arrow: HTMLElement
+
+	connectedCallback() {
+		this.box = document.createElement("div")
+		this.box.classList.add("box")
+		this.appendChild(this.box)
+
+		this.arrow = document.createElement("div")
+		this.arrow.classList.add("arrow")
+		this.appendChild(this.arrow)
+	}
+
+	hide() {
+		this.setAttribute("active", "false")
+	}
+
+	show(anchor: HTMLElement) {
+		const distanceToBorder = 5
+
+		this.anchor = anchor
+		this.box.textContent = this.anchor.getAttribute("aria-label")
+
+		let anchorRect = this.anchor.getBoundingClientRect()
+		let boxRect = this.box.getBoundingClientRect()
+
+		let finalX = anchorRect.left + anchorRect.width / 2 - boxRect.width / 2
+		let finalY = anchorRect.top - boxRect.height
+
+		let contentRect = {
+			left: distanceToBorder,
+			top: distanceToBorder,
+			right: document.body.clientWidth - distanceToBorder,
+			bottom: document.body.clientHeight - distanceToBorder
+		}
+
+		let offsetX = 0
+
+		if(finalX < contentRect.left) {
+			offsetX = contentRect.left - finalX
+			finalX += offsetX
+		} else if(finalX + boxRect.width > contentRect.right) {
+			offsetX = contentRect.right - (finalX + boxRect.width)
+			finalX += offsetX
+		}
+
+		let arrowX = boxRect.width / 2 - offsetX
+
+		Diff.mutations.queue(() => {
+			this.style.left = finalX + "px"
+			this.style.top = finalY + "px"
+			this.arrow.style.left = arrowX + "px"
+			this.setAttribute("active", "true")
+		})
+	}
+}