From 2134bdf93aba9716c22729dd35c68879903fa2a6 Mon Sep 17 00:00:00 2001
From: ebolam <ebolam@gmail.com>
Date: Tue, 11 Oct 2022 14:52:30 -0400
Subject: [PATCH] Tooltip Fix

---
 static/koboldai.css | 28 +++++++++++++++++++++++++---
 static/koboldai.js  |  4 +++-
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/static/koboldai.css b/static/koboldai.css
index cca8cbdc..614407f5 100644
--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -1891,19 +1891,41 @@ body {
 
 [tooltip]:hover::after {
 	content: attr(tooltip);
-	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+	position: fixed;
+	transition: opacity  0s linear 0.5s;
+
+	
+	top: calc(var(--mouse-y) * 100vh);
+	left: calc(var(--mouse-x) * 100vw);
+	transform: translate(var(--tooltip_x), var(--tooltip_y)) !important;
+	opacity: 1;
+	
+
+	padding: 0px 2px;
+	color: var(--tooltip_text);
+	background-color: var(--tooltip_background);
+
+	pointer-events: none;
+	z-index: 9999999;
+}
+
+.context-token[tooltip]:hover::after {
+	content: attr(tooltip);
+	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 	position: fixed;
 	transition: opacity  0s linear 0.5s;
 
 	
 	top: calc(var(--mouse-y) * 100vh - 30px);
 	left: calc(var(--mouse-x) * 100vw);
-	transform: translate(var(--tooltip_x), var(--tooltip_y));
+	transform: translate(var(--tooltip_x), var(--tooltip_y_context)) !important;
 	opacity: 1;
 	
 
 	padding: 0px 2px;
-	background-color: rgba(0, 0, 0, 0.6);
+	color: var(--tooltip_text);
+	background-color: var(--tooltip_background);
 
 	pointer-events: none;
 	z-index: 9999999;
diff --git a/static/koboldai.js b/static/koboldai.js
index 1cfaef3f..060d5459 100644
--- a/static/koboldai.js
+++ b/static/koboldai.js
@@ -5053,9 +5053,11 @@ document.addEventListener('mousemove', evt => {
 		r.style.setProperty("--tooltip_x", "0%");
 	}
 	if (y > 0.5) {
-		r.style.setProperty("--tooltip_y", "0%");
+		r.style.setProperty("--tooltip_y", "-100%");
+		r.style.setProperty("--tooltip_y_context", "0%");
 	} else {
 		r.style.setProperty("--tooltip_y", "200%");
+		r.style.setProperty("--tooltip_y_context", "200%");
 	}
 	r.style.setProperty("--mouse-x", evt.clientX / innerWidth);
 	r.style.setProperty("--mouse-y", evt.clientY / innerHeight);