Tooltips respect left and right content borders

scripts/AnimeNotifier.ts

@@ -158,6 +158,7 @@ export default class AnimeNotifier {
 			Promise.resolve().then(() => this.assignActions()),
 			Promise.resolve().then(() => this.updatePushUI()),
 			Promise.resolve().then(() => this.dragAndDrop()),
+			Promise.resolve().then(() => this.assignTooltipOffsets()),
 			Promise.resolve().then(() => this.colorStripes()),
 			Promise.resolve().then(() => this.countUp())
 		])
@@ -236,6 +237,40 @@ export default class AnimeNotifier {
 		}
 	}
 
+	assignTooltipOffsets() {
+		let contentRect = this.app.content.getBoundingClientRect()
+
+		for(let element of findAll("tip")) {
+			Diff.mutations.queue(() => {
+				let rect = element.getBoundingClientRect()
+				let tipStyle = window.getComputedStyle(element, ":before")
+				let tipWidth = parseInt(tipStyle.width) + parseInt(tipStyle.paddingLeft) * 2
+				let tipStartX = rect.left + rect.width / 2 - tipWidth / 2 - contentRect.left
+				let tipEndX = tipStartX + tipWidth
+				let leftOffset = 0
+
+				if(tipStartX < 0) {
+					leftOffset = -tipStartX + 5
+				} else if(tipEndX > contentRect.width) {
+					leftOffset = -(tipEndX - contentRect.width + 5)
+				}
+
+				if(leftOffset !== 0) {
+					element.classList.remove("tip")
+					element.classList.add("tip-offset-root")
+
+					let tipChild = document.createElement("div")
+					tipChild.classList.add("tip-offset-child")
+					tipChild.setAttribute("aria-label", element.getAttribute("aria-label"))
+					tipChild.style.left = leftOffset + "px"
+					tipChild.style.width = rect.width + "px"
+					tipChild.style.height = rect.height + "px"
+					element.appendChild(tipChild)
+				}
+			})
+		}
+	}
+
 	dragAndDrop() {
 		for(let element of findAll("inventory-slot")) {
 			// Skip elements that have their event listeners attached already