Rework tooltips with hint.css

GODrums · Dec 16, 2024 · 511727d · 511727d
1 parent 1225ffe
commit 511727d
Show file tree

Hide file tree

Showing 14 changed files with 68 additions and 83 deletions.
diff --git a/src/contents/buffmarket_script.ts b/src/contents/buffmarket_script.ts
@@ -15,7 +15,7 @@ import { generatePriceLine } from '~lib/util/uigeneration';
 export const config: PlasmoCSConfig = {
 	matches: ['https://*.buff.market/*'],
 	run_at: 'document_end',
-	css: ['../css/buffmarket_styles.css'],
+	css: ['../css/hint.min.css', '../css/common_styles.css', '../css/buffmarket_styles.css'],
 };
 
 type PriceResult = {

diff --git a/src/contents/csfloat_script.ts b/src/contents/csfloat_script.ts
@@ -70,7 +70,7 @@ import type { IStorage } from '~lib/util/storage';
 export const config: PlasmoCSConfig = {
 	matches: ['https://*.csfloat.com/*'],
 	run_at: 'document_end',
-	css: ['../css/csfloat_styles.css'],
+	css: ['../css/hint.min.css', '../css/common_styles.css', '../css/csfloat_styles.css'],
 };
 
 init();

diff --git a/src/contents/csmoney_script.ts b/src/contents/csmoney_script.ts
@@ -23,7 +23,7 @@ import { generatePriceLine } from '~lib/util/uigeneration';
 export const config: PlasmoCSConfig = {
 	matches: ['https://*.cs.money/*'],
 	run_at: 'document_end',
-	css: ['../css/csmoney_styles.css'],
+	css: ['../css/hint.min.css', '../css/common_styles.css', '../css/csmoney_styles.css'],
 };
 
 type PriceResult = {
@@ -338,6 +338,10 @@ async function addBuffPrice(item: CSMoney.Item, container: Element, isPopout = f
 		});
 
 		footerContainer.insertAdjacentHTML('afterend', buffContainer);
+
+		if (!isPopout) {
+			footerContainer.parentElement?.parentElement?.style.setProperty('overflow', 'visible');
+		}
 	}
 
 	if (priceListing?.gt(0.06) && location.pathname !== '/market/sell/') {

diff --git a/src/contents/dmarket_script.ts b/src/contents/dmarket_script.ts
@@ -15,7 +15,7 @@ import { generatePriceLine } from '~lib/util/uigeneration';
 export const config: PlasmoCSConfig = {
 	matches: ['*://*.dmarket.com/*'],
 	run_at: 'document_end',
-	css: ['../css/dmarket_styles.css'],
+	css: ['../css/hint.min.css', '../css/common_styles.css', '../css/dmarket_styles.css'],
 };
 
 type PriceResult = {

diff --git a/src/contents/lisskins_script.ts b/src/contents/lisskins_script.ts
@@ -20,7 +20,7 @@ type PriceResult = {
 export const config: PlasmoCSConfig = {
 	matches: ['https://*.lis-skins.com/*'],
 	run_at: 'document_end',
-	css: ['../css/lisskins_styles.css'],
+	css: ['../css/hint.min.css', '../css/common_styles.css', '../css/lisskins_styles.css'],
 };
 
 async function init() {

diff --git a/src/contents/skinbaron_script.ts b/src/contents/skinbaron_script.ts
@@ -15,7 +15,7 @@ import { generatePriceLine } from '~lib/util/uigeneration';
 export const config: PlasmoCSConfig = {
 	matches: ['*://*.skinbaron.de/*'],
 	run_at: 'document_end',
-	css: ['../css/skinbaron_styles.css'],
+	css: ['../css/hint.min.css', '../css/common_styles.css', '../css/skinbaron_styles.css'],
 };
 
 type PriceResult = {

diff --git a/src/contents/skinbid_script.ts b/src/contents/skinbid_script.ts
@@ -17,7 +17,7 @@ import type { IStorage } from '~lib/util/storage';
 
 export const config: PlasmoCSConfig = {
 	matches: ['https://*.skinbid.com/*'],
-	css: ['../css/skinbid_styles.css'],
+	css: ['../css/hint.min.css', '../css/common_styles.css', '../css/skinbid_styles.css'],
 	run_at: 'document_end',
 };
 

diff --git a/src/contents/skinport_script.ts b/src/contents/skinport_script.ts
@@ -35,7 +35,7 @@ import type { IStorage, SPFilter } from '~lib/util/storage';
 export const config: PlasmoCSConfig = {
 	matches: ['https://*.skinport.com/*'],
 	run_at: 'document_idle',
-	css: ['../css/skinport_styles.css'],
+	css: ['../css/hint.min.css', '../css/common_styles.css', '../css/skinport_styles.css'],
 };
 
 init();
@@ -489,17 +489,9 @@ function storeItem(container: Element, item: Skinport.Listing) {
 export async function patternDetections(container: Element, item: Skinport.Item) {
 	if (item.name.includes('Case Hardened') || item.name.includes('Heat Treated')) {
 		await caseHardenedDetection(container, item);
-	} else if ((item.name.includes('Crimson Web') || item.name.includes('Emerald Web')) && item.name.startsWith('★')) {
-		webDetection(container, item);
 	}
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function webDetection(container: Element, item: Skinport.Item) {
-	const itemHeader = container.querySelector('.TradeLock-lock');
-	if (!itemHeader) return;
-}
-
 export async function addBlueBadge(container: Element, item: Skinport.Item) {
 	const itemHeader = container.querySelector('.TradeLock-lock');
 	if (!itemHeader || container.querySelector('.betterfloat-gem-container')) return;

diff --git a/src/css/common_styles.css b/src/css/common_styles.css
@@ -0,0 +1,11 @@
+[class*='hint--'][aria-label]:after {
+    text-shadow: none;
+    font-weight: normal;
+    line-height: normal;
+    text-align: center;
+    background: hsl(240 5.9% 10%);
+    color: hsl(0 0% 98%);
+    font-size: 13px;
+    border-radius: 4px;
+	padding: 10px;
+}
diff --git a/src/css/csfloat_styles.css b/src/css/csfloat_styles.css
@@ -25,6 +25,14 @@ body.light-theme {
 	color: hsl(229 63% 4%) !important;
 }
 
+[class*='hint--'][aria-label]:after {
+	color: #fff;
+	-webkit-backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
+	background-color: #171920c4;
+	border: 1px solid #3f3f3f;
+}
+
 .betterfloat-buff-a {
 	display: inline-flex;
 	align-items: center;
@@ -65,35 +73,6 @@ body.light-theme {
 	margin: 4px 8px 4px 8px;
 }
 
-.betterfloat-buff-tooltip {
-	/* Positioning the tooltip text */
-	position: absolute;
-	z-index: 9999;
-	transform: translate(-13%, 25px);
-
-	visibility: hidden;
-	color: #fff;
-	text-align: center;
-	-webkit-backdrop-filter: blur(10px);
-	backdrop-filter: blur(10px);
-	background-color: #171920c4;
-	padding: 10px 5px;
-	border-radius: 4px;
-	border: 1px solid #3f3f3f;
-	font-size: 13px;
-	width: 180px;
-
-	/* Fade in tooltip */
-	opacity: 0;
-	transition: opacity 0.1s;
-}
-
-.betterfloat-buffprice:hover .betterfloat-buff-tooltip {
-	visibility: visible;
-	opacity: 1;
-	transition: visibility 0s, opacity 0.2s linear;
-}
-
 .betterfloat-buffprice {
 	margin-left: 2px;
 	padding-top: 1px;

diff --git a/src/css/csmoney_styles.css b/src/css/csmoney_styles.css
@@ -1,3 +1,7 @@
+[class*='hint--'][aria-label]:after {
+	font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+    color: #bbb9c7;
+}
 .betterfloat-buffprice {
 	margin-left: 2px;
 	padding-top: 1px;
@@ -48,32 +52,3 @@
 	margin-top: 5px;
 	gap: 4px;
 }
-
-.betterfloat-buff-tooltip {
-	/* Positioning the tooltip text */
-	position: absolute;
-	z-index: 9999;
-	transform: translate(-13%, 25px);
-
-	visibility: hidden;
-	color: #fff;
-	text-align: center;
-	-webkit-backdrop-filter: blur(10px);
-	backdrop-filter: blur(10px);
-	background-color: #171920c4;
-	padding: 10px 5px;
-	border-radius: 4px;
-	border: 1px solid #3f3f3f;
-	font-size: 13px;
-	width: 180px;
-
-	/* Fade in tooltip */
-	opacity: 0;
-	transition: opacity 0.1s;
-}
-
-.betterfloat-buffprice:hover .betterfloat-buff-tooltip {
-	visibility: visible;
-	opacity: 1;
-	transition: visibility 0s, opacity 0.2s linear;
-}
diff --git a/src/css/hint.min.css b/src/css/hint.min.css
diff --git a/src/lib/helpers/websockethandler.ts b/src/lib/helpers/websockethandler.ts
@@ -1,6 +1,6 @@
 import iconBan from 'data-base64:~/../assets/icons/ban-solid.svg';
 import { getSetting } from '~lib/util/storage';
-import { addBlueBadge, webDetection } from '../../contents/skinport_script';
+import { addBlueBadge } from '../../contents/skinport_script';
 import type { Skinport } from '../@typings/SkinportTypes';
 import { addPattern } from './skinport_helpers';
 
@@ -16,8 +16,6 @@ export async function handleListed(data: Skinport.Item[]) {
 
 				if (['Case Hardened', 'Heat Treated'].includes(item.name) && item.category !== 'Gloves' && (await getSetting('sp-csbluegem'))) {
 					await addBlueBadge(element, item);
-				} else if ((item.marketHashName.includes('Crimson Web') || item.marketHashName.includes('Emerald Web')) && item.category === 'Gloves') {
-					webDetection(element, item);
 				}
 			}
 		}

diff --git a/src/lib/util/uigeneration.ts b/src/lib/util/uigeneration.ts
@@ -69,15 +69,14 @@ export function generatePriceLine({
 	const buffContainer = html`
 		<a class="betterfloat-buff-a ${isPopout ? 'betterfloat-big-a' : ''}" href="${href}" target="_blank">
 			<img src="${icon}" style="${iconStyle}" />
-			<div class="${containerClass ?? ''} betterfloat-buffprice ${isPopout ? 'betterfloat-big-price' : ''}" data-betterfloat='${bfDataAttribute}'>
+			<div 
+				class="${containerClass ?? ''} betterfloat-buffprice ${isPopout ? 'betterfloat-big-price' : ''} hint--bottom hint--rounded hint--no-arrow" 
+				data-betterfloat='${bfDataAttribute}'
+				aria-label="Bid: Highest buy order price\nAsk: Lowest listing price"
+			>
 				${
 					[MarketSource.Buff, MarketSource.Steam].includes(source)
 						? html`
-							<span class="betterfloat-buff-tooltip">
-								Bid: Highest buy order price;
-								<br />
-								Ask: Lowest listing price
-							</span>
 							<span style="color: orange;"> ${extendedDisplay ? 'Bid ' : ''}${CurrencyFormatter.format(priceOrder?.toNumber() ?? 0)} </span>
 							<span style="color: gray;${addSpaceBetweenPrices ? 'margin: 0 3px 0 3px;' : ''}">|</span>
 							<span style="color: greenyellow;"> ${extendedDisplay ? 'Ask ' : ''}${CurrencyFormatter.format(priceListing?.toNumber() ?? 0)} </span>