ui/toolbarButton: wrap in tooltip for always having more information

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

@@ -3,22 +3,26 @@ import cx from "classnames";
 import { Button } from "@kobalte/core/button";
 import Icon, { IconVariant } from "@/src/components/Icon/Icon";
 import type { JSX } from "solid-js";
+import { Tooltip } from "../Tooltip/Tooltip";
 
 export interface ToolbarButtonProps
   extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
   icon: IconVariant;
+  description: JSX.Element;
   selected?: boolean;
 }
 
 export const ToolbarButton = (props: ToolbarButtonProps) => {
   return (
-    <Button
-      class={cx(styles.toolbar_button, {
-        [styles["selected"]]: props.selected,
-      })}
-      {...props}
-    >
-      <Icon icon={props.icon} inverted={!props.selected} />
-    </Button>
+    <Tooltip description={props.description} gutter={10} placement="top">
+      <Button
+        class={cx(styles.toolbar_button, {
+          [styles["selected"]]: props.selected,
+        })}
+        {...props}
+      >
+        <Icon icon={props.icon} inverted={!props.selected} />
+      </Button>
+    </Tooltip>
   );
 };