ui/tooltip: cleanup hostfileInput

Components should not rely on any global css classes
This can have bad side effects

pkgs/clan-app/ui/src/components/Form/HostFileInput.module.css

@@ -5,3 +5,14 @@
 .horizontal_button {
   @apply grow max-w-[18rem];
 }
+
+/* Vendored from tooltip */
+.tooltipContent {
+  @apply z-50 px-2 py-0.5 bg-inv-4 rounded-[0.125rem] leading-none;
+
+  max-width: min(calc(100vw - 16px), 380px);
+
+  &.inverted {
+    @apply bg-def-2;
+  }
+}

pkgs/clan-app/ui/src/components/Form/HostFileInput.tsx

@@ -87,7 +87,7 @@ export const HostFileInput = (props: HostFileInputProps) => {
         {value() && (
           <Tooltip placement="top">
             <Tooltip.Portal>
-              <Tooltip.Content class="tooltip-content">
+              <Tooltip.Content class={styles.tooltipContent}>
                 <Typography
                   hierarchy="body"
                   size="xs"

pkgs/clan-app/ui/src/components/Toolbar/Toolbar.stories.tsx

@@ -2,8 +2,6 @@ import { Meta, StoryObj } from "@kachurun/storybook-solid";
 import { Toolbar, ToolbarProps } from "@/src/components/Toolbar/Toolbar";
 import { Divider } from "@/src/components/Divider/Divider";
 import { ToolbarButton } from "./ToolbarButton";
-import { Tooltip } from "../Tooltip/Tooltip";
-import { Typography } from "../Typography/Typography";
 
 const meta: Meta<ToolbarProps> = {
   title: "Components/Toolbar",
@@ -18,11 +16,24 @@ export const Default: Story = {
   args: {
     children: (
       <>
-        <ToolbarButton name="select" icon="Cursor" />
-        <ToolbarButton name="new-machine" icon="NewMachine" />
+        <ToolbarButton
+          name="select"
+          icon="Cursor"
+          description="Select my thing"
+        />
+        <ToolbarButton
+          name="new-machine"
+          icon="NewMachine"
+          description="Select this thing"
+        />
         <Divider orientation="vertical" />
-        <ToolbarButton name="modules" icon="Modules" selected={true} />
-        <ToolbarButton name="ai" icon="AI" />
+        <ToolbarButton
+          name="modules"
+          icon="Modules"
+          selected={true}
+          description="Add service"
+        />
+        <ToolbarButton name="ai" icon="AI" description="Call your AI Manager" />
       </>
     ),
   },
@@ -40,49 +51,22 @@ export const WithTooltip: Story = {
   args: {
     children: (
       <>
-        <Tooltip
-          trigger={<ToolbarButton name="select" icon="Cursor" />}
-          placement="top"
-        >
-          <div class="mb-1 p-1 text-fg-inv-1">
-            <Typography hierarchy="label" size="s" color="inherit">
-              Select an object
-            </Typography>
-          </div>
-        </Tooltip>
-        <Divider orientation="vertical" />
-        <Tooltip
-          trigger={<ToolbarButton name="new-machine" icon="NewMachine" />}
-          placement="top"
-        >
-          <div class="mb-1 p-1 text-fg-inv-1">
-            <Typography hierarchy="label" size="s" color="inherit">
-              Create a new machine
-            </Typography>
-          </div>
-        </Tooltip>
-        <Tooltip
-          trigger={
-            <ToolbarButton name="modules" icon="Modules" selected={true} />
-          }
-          placement="top"
-        >
-          <div class="mb-1 p-1 text-fg-inv-1">
-            <Typography hierarchy="label" size="s" color="inherit">
-              Manage Services
-            </Typography>
-          </div>
-        </Tooltip>
-        <Tooltip
-          trigger={<ToolbarButton name="ai" icon="AI" />}
-          placement="top"
-        >
-          <div class="mb-1 p-1 text-fg-inv-1">
-            <Typography hierarchy="label" size="s" color="inherit">
-              Chat with AI
-            </Typography>
-          </div>
-        </Tooltip>
+        <ToolbarButton name="select" icon="Cursor" description="Select" />
+
+        <ToolbarButton
+          name="new-machine"
+          icon="NewMachine"
+          description="Select"
+        />
+
+        <ToolbarButton
+          name="modules"
+          icon="Modules"
+          selected={true}
+          description="Select"
+        />
+
+        <ToolbarButton name="ai" icon="AI" description="Select" />
       </>
     ),
   },