improve tooltip

package.json

@@ -16,6 +16,7 @@
 	"devDependencies": {
 		"@eslint/eslintrc": "^3.3.0",
 		"@eslint/js": "^9.22.0",
+		"@floating-ui/dom": "^1.6.13",
 		"@huggingface/hub": "^1.0.1",
 		"@huggingface/inference": "^3.5.1",
 		"@huggingface/tasks": "^0.17.1",
@@ -36,7 +37,7 @@
 		"globals": "^16.0.0",
 		"highlight.js": "^11.10.0",
 		"jiti": "^2.4.2",
-		"melt": "^0.18.4",
+		"melt": "^0.20.2",
 		"postcss": "^8.4.38",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.2.6",

pnpm-lock.yaml

@@ -21,6 +21,9 @@ importers:
       '@eslint/js':
         specifier: ^9.22.0
         version: 9.22.0
+      '@floating-ui/dom':
+        specifier: ^1.6.13
+        version: 1.6.13
       '@huggingface/hub':
         specifier: ^1.0.1
         version: 1.0.1
@@ -82,8 +85,8 @@ importers:
         specifier: ^2.4.2
         version: 2.4.2
       melt:
-        specifier: ^0.18.4
-        version: 0.18.4(@floating-ui/[email protected])([email protected])
+        specifier: ^0.20.2
+        version: 0.20.2(@floating-ui/[email protected])([email protected])
       postcss:
         specifier: ^8.4.38
         version: 8.5.3
@@ -1545,8 +1548,8 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
-  melt@0.18.4:
-    resolution: {integrity: sha512-AH7im4MEmHS/8MFhGDnfiuF4ibdm0guFWiBvBaF93YIzA0hhuWMcGxD8HdEsQ8q1Q6xIIRm9FdGd0WICc7Nk2A==}
+  melt@0.20.2:
+    resolution: {integrity: sha512-vINBKFVqFN8LVU6K7AbEwlGTOzSi5BQulxhKkIroxPWnCA3LVsQEIDZabtf9TtnzFa/th0Rm8J0N+hW1v7VJDw==}
     peerDependencies:
       '@floating-ui/dom': ^1.6.0
       svelte: ^5.0.0
@@ -3471,7 +3474,7 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  melt@0.18.4(@floating-ui/[email protected])([email protected]):
+  melt@0.20.2(@floating-ui/[email protected])([email protected]):
     dependencies:
       '@floating-ui/dom': 1.6.13
       jest-axe: 9.0.0

src/lib/components/tooltip.svelte

@@ -1,19 +1,27 @@
 <script lang="ts">
-	import { Tooltip, type TooltipProps } from "melt/builders";
 	import { type ComponentProps, type Extracted } from "melt";
+	import { Tooltip, type TooltipProps } from "melt/builders";
 	import type { Snippet } from "svelte";
 
+	type FloatingConfig = NonNullable<Extracted<TooltipProps["floatingConfig"]>>;
+
 	interface Props {
 		children: Snippet;
 		trigger: Snippet<[Tooltip]>;
-		placement?: NonNullable<Extracted<TooltipProps["computePositionOptions"]>>["placement"];
+		placement?: NonNullable<FloatingConfig["computePosition"]>["placement"];
 		openDelay?: ComponentProps<TooltipProps>["openDelay"];
 	}
 	const { children, trigger, placement = "top", openDelay = 500 }: Props = $props();
 
 	const tooltip = new Tooltip({
 		forceVisible: true,
-		computePositionOptions: () => ({ placement }),
+		floatingConfig: () => ({
+			computePosition: { placement },
+			flip: {
+				fallbackPlacements: ["bottom"],
+				padding: 10,
+			},
+		}),
 		openDelay: () => openDelay,
 	});
 </script>