Use react tooltips instead of custom css

front/apps/web/package.json

@@ -35,6 +35,7 @@
 		"react-native-svg": "13.11.0",
 		"react-native-video": "^6.0.0-alpha.7",
 		"react-native-web": "0.19.7",
+		"react-tooltip": "^5.22.0",
 		"solito": "^4.0.1",
 		"srt-webvtt": "^2.0.0",
 		"superjson": "^1.13.1",

front/apps/web/src/pages/_app.tsx

@@ -39,6 +39,7 @@ import superjson from "superjson";
 import Head from "next/head";
 import { withTranslations } from "../i18n";
 import arrayShuffle from "array-shuffle";
+import { Tooltip } from "react-tooltip";
 
 const font = Poppins({ weight: ["300", "400", "900"], subsets: ["latin"], display: "swap" });
 
@@ -139,6 +140,7 @@ const App = ({ Component, pageProps }: AppProps) => {
 								randomItems={[]}
 								{...layoutProps}
 							/>
+							<Tooltip id="tooltip" positionStrategy={"fixed"} />
 						</ThemeSelector>
 					</Hydrate>
 				</QueryClientProvider>

front/packages/primitives/src/tooltip.web.tsx

@@ -21,63 +21,23 @@
 import { Theme } from "yoshiki/native";
 
 export const tooltip = (tooltip: string, up?: boolean) => ({
-	dataSet: { tooltip, label: tooltip, tooltipPos: up ? "up" : undefined },
+	dataSet: {
+		tooltipContent: tooltip,
+		label: tooltip,
+		tooltipPlace: up ? "top" : "bottom",
+		tooltipId: "tooltip",
+	},
 });
 
 export const WebTooltip = ({ theme }: { theme: Theme }) => {
-	const background = `${theme.light.colors.black}CC`;
-
 	return (
 		<style jsx global>{`
-			[data-tooltip] {
-				position: relative;
-			}
-
-			[data-tooltip]::after {
-				content: attr(data-tooltip);
-				display: flex;
-
-				position: absolute;
-				top: 100%;
-				left: 50%;
-				transform: translate(-50%);
-				z-index: 999;
-
-				width: max-content;
-				max-width: 300%;
-
-				margin-top: 8px;
-				border-radius: 5px;
-				padding: 6px;
-				font-size: 0.8rem;
-				color: ${theme.colors.white};
-				background-color: ${background};
-				text-align: center;
-
-				opacity: 0;
-				visibility: hidden;
-				transition: opacity 0.3s ease-in-out;
-			}
-			[data-tooltip-pos]::after {
-				top: unset;
-				bottom: 100%;
-				margin-bottom: 8px;
-			}
-
-			:where(body:not(.noHover)) [data-tooltip]:hover::after,
-			[data-tooltip]:focus-visible::after {
-				opacity: 1;
-				visibility: visible;
-			}
-
-			:focus:not(:focus-visible) {
-				outline: none;
-			}
-
-			:focus-visible {
-				outline: none;
-				transition: box-shadow 0.15s ease-in-out;
-				box-shadow: 0 0 0 2px ${theme.colors.black};
+			body {
+				--rt-color-white: ${theme.alternate.contrast};
+				--rt-color-dark: ${theme.user.contrast};
+				--rt-opacity: 0.9;
+				--rt-transition-show-delay: 0.15s;
+				--rt-transition-closing-delay: 0.15s;
 			}
 		`}</style>
 	);

front/yarn.lock

@@ -2191,6 +2191,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.4.2":
+  version: 1.5.0
+  resolution: "@floating-ui/core@npm:1.5.0"
+  dependencies:
+    "@floating-ui/utils": ^0.1.3
+  checksum: 54b4fe26b3c228746ac5589f97303abf158b80aa5f8b99027259decd68d1c2030c4c637648ebd33dfe78a4212699453bc2bd7537fd5a594d3bd3e63d362f666f
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^1.0.0":
+  version: 1.5.3
+  resolution: "@floating-ui/dom@npm:1.5.3"
+  dependencies:
+    "@floating-ui/core": ^1.4.2
+    "@floating-ui/utils": ^0.1.3
+  checksum: 00053742064aac70957f0bd5c1542caafb3bfe9716588bfe1d409fef72a67ed5e60450d08eb492a77f78c22ed1ce4f7955873cc72bf9f9caf2b0f43ae3561c21
+  languageName: node
+  linkType: hard
+
 "@floating-ui/dom@npm:^1.3.0":
   version: 1.5.1
   resolution: "@floating-ui/dom@npm:1.5.1"
@@ -2220,6 +2239,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/utils@npm:^0.1.3":
+  version: 0.1.6
+  resolution: "@floating-ui/utils@npm:0.1.6"
+  checksum: b34d4b5470869727f52e312e08272edef985ba5a450a76de0917ba0a9c6f5df2bdbeb99448e2c60f39b177fb8981c772ff1831424e75123471a27ebd5b52c1eb
+  languageName: node
+  linkType: hard
+
 "@formatjs/ecma402-abstract@npm:1.17.0":
   version: 1.17.0
   resolution: "@formatjs/ecma402-abstract@npm:1.17.0"
@@ -5451,6 +5477,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"classnames@npm:^2.3.0":
+  version: 2.3.2
+  resolution: "classnames@npm:2.3.2"
+  checksum: 2c62199789618d95545c872787137262e741f9db13328e216b093eea91c85ef2bfb152c1f9e63027204e2559a006a92eb74147d46c800a9f96297ae1d9f96f4e
+  languageName: node
+  linkType: hard
+
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -11788,6 +11821,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-tooltip@npm:^5.22.0":
+  version: 5.22.0
+  resolution: "react-tooltip@npm:5.22.0"
+  dependencies:
+    "@floating-ui/dom": ^1.0.0
+    classnames: ^2.3.0
+  peerDependencies:
+    react: ">=16.14.0"
+    react-dom: ">=16.14.0"
+  checksum: 8b93473a55bbc657966e5f8c129ca1c498ff5ae2688d8a9f44ad171c6f0761f45b6bea06ffd86d1931753b2148e2230eb2cf08635c7d619adcf4998647ffa720
+  languageName: node
+  linkType: hard
+
 "react@npm:18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
@@ -13894,6 +13940,7 @@ __metadata:
     react-native-svg: 13.11.0
     react-native-video: ^6.0.0-alpha.7
     react-native-web: 0.19.7
+    react-tooltip: ^5.22.0
     solito: ^4.0.1
     srt-webvtt: ^2.0.0
     superjson: ^1.13.1