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

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

@@ -3,15 +3,18 @@ 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 (
+    <Tooltip description={props.description} gutter={10} placement="top">
       <Button
         class={cx(styles.toolbar_button, {
           [styles["selected"]]: props.selected,
@@ -20,5 +23,6 @@ export const ToolbarButton = (props: ToolbarButtonProps) => {
       >
         <Icon icon={props.icon} inverted={!props.selected} />
       </Button>
+    </Tooltip>
   );
 };