From a14609a768831921a66d1f1fe64ce9bbab4278de Mon Sep 17 00:00:00 2001
From: ebolam <ebolam@gmail.com>
Date: Tue, 11 Oct 2022 13:51:05 -0400
Subject: [PATCH] Tooltip Change

---
 static/koboldai.css | 71 ++++++++++++++++++++++++++++-----------------
 static/koboldai.js  | 24 +++++++++++++--
 2 files changed, 66 insertions(+), 29 deletions(-)

diff --git a/static/koboldai.css b/static/koboldai.css
index d16d34ad..16af25af 100644
--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -1887,13 +1887,22 @@ body {
 	outline: 1px solid gray;
 }
 
-.context-token:hover::after {
-	content: attr(token-id);
-	position: absolute;
+[tooltip]:after {
+	opacity: 0;
+	content: "";
+}
 
-	top: -120%;
-	left: 50%;
-	transform: translateX(-50%);
+[tooltip]:hover::after {
+	content: attr(tooltip);
+	position: fixed;
+
+	top: calc(var(--mouse-y) * 100vh - 30px);
+	left: calc(var(--mouse-x) * 100vw);
+	transition: opacity  0s linear 0.5s;
+	transform: translate(var(--tooltip_x), var(--tooltip_y));
+	/*transform: translate(-100%, -100%);*/
+	opacity: 1;
+	
 
 	padding: 0px 2px;
 	background-color: rgba(0, 0, 0, 0.6);
@@ -1902,6 +1911,33 @@ body {
 	z-index: 9999999;
 }
 
+/* Mobile tooltips */
+@media (pointer: coarse), (hover: none) {
+	[tooltip]:after {
+		opacity: 0;
+		content: "";
+	}
+
+	[tooltip]:hover::after {
+		content: attr(tooltip);
+		position: fixed;
+
+		top: calc(var(--mouse-y) * 100vh);
+		left: calc(var(--mouse-x) * 100vw);
+		transform: translate(var(--tooltip_x), var(--tooltip-y));
+		transition: opacity  0s linear 0.5s;
+		opacity: 1;
+		
+
+		padding: 0px 2px;
+		background-color: rgba(0, 0, 0, 0.6);
+
+		pointer-events: none;
+		z-index: 9999999;
+	}
+}
+
+
 .context-sp {background-color: var(--context_colors_soft_prompt);}
 .context-prompt {background-color: var(--context_colors_prompt);}
 .context-wi {background-color: var(--context_colors_world_info);}
@@ -2600,25 +2636,6 @@ h2 .material-icons-outlined {
 }
 
 
-
-@media (pointer: coarse), (hover: none) {
-	[title] {
-		position: relative;
-		display: inline-flex;
-		justify-content: center;
-	}
-	[title]:focus::after {
-		content: attr(title);
-		position: absolute;
-		top: 90%;
-		color: #000;
-		background-color: #fff;
-		border: 1px solid;
-		width: fit-content;
-		padding: 3px;
-	}
-}
-
 .horde_trigger[model_model="ReadOnly"],
 .horde_trigger[model_model="CLUSTER"] {
 	display: none;
@@ -2649,7 +2666,7 @@ input[type='range'] {
 	width: var(--flyout_menu_width);
 }
 
-/*Tooltip based on attribute*/
+/*Tooltip based on attribute
 [tooltip] {
 	cursor: pointer;
 	display: inline-block;
@@ -2697,4 +2714,4 @@ input[type='range'] {
 [tooltip]:hover::after, [tooltip][class*=tooltip]:hover::before {
   visibility: visible;
   opacity: 1;
-}
+}*/
diff --git a/static/koboldai.js b/static/koboldai.js
index 82e5460d..807a5205 100644
--- a/static/koboldai.js
+++ b/static/koboldai.js
@@ -2902,7 +2902,7 @@ function update_context(data) {
 
 			let tokenEl = $e("span", el, {
 				classes: ["context-token"],
-				"token-id": tokenId === -1 ? "Soft" : tokenId,
+				"tooltip": tokenId === -1 ? "Soft" : tokenId,
 				innerText: token,
 				"style.backgroundColor": tokenColor,
 			});
@@ -5040,4 +5040,24 @@ function run_infinite_scroll_update(action_type, actions, first_action) {
 			
 		}
 	}
-}
\ No newline at end of file
+}
+
+document.addEventListener('mousemove', evt => {
+    let x = evt.clientX / innerWidth;
+    let y = evt.clientY / innerHeight;
+ 
+	var r = document.querySelector(':root');
+	if (x > 0.5) {
+		r.style.setProperty("--tooltip_x", "-100%");
+	} else {
+		r.style.setProperty("--tooltip_x", "0%");
+	}
+	if (y > 0.5) {
+		r.style.setProperty("--tooltip_y", "200%");
+	} else {
+		r.style.setProperty("--tooltip_y", "0%");
+	}
+	r.style.setProperty("--mouse-x", evt.clientX / innerWidth);
+	r.style.setProperty("--mouse-y", evt.clientY / innerHeight);
+	
+});
\ No newline at end of file