feat: Increase info tooltip accessibility

PrettyCoffee · Apr 21, 2024 · f8d9f1d · f8d9f1d
1 parent 3c1ad25
commit f8d9f1d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/components/InfoHint.tsx b/src/components/InfoHint.tsx
@@ -2,13 +2,20 @@ import { PropsWithChildren } from "react"
 
 import { Info } from "lucide-react"
 
+import { textColor } from "~/utils/colors"
+
 import { Icon } from "./Icon"
 import { TitleTooltip } from "./TitleTooltip"
 
 export const InfoHint = ({ children }: PropsWithChildren) => (
   <TitleTooltip title={children as string} asChild>
     <span className="inline-flex size-8 items-center justify-center">
-      <Icon icon={Info} color="muted" size="sm" />
+      <Icon
+        icon={Info}
+        color="current"
+        size="sm"
+        className={textColor({ color: "blue" })}
+      />
     </span>
   </TitleTooltip>
 )
diff --git a/src/components/TitleTooltip.tsx b/src/components/TitleTooltip.tsx
@@ -22,7 +22,7 @@ export const TitleTooltip = ({
   !title || disabled ? (
     children
   ) : (
-    <Tooltip.Root disableHoverableContent>
+    <Tooltip.Root disableHoverableContent delayDuration={300}>
       <Tooltip.Trigger asChild={asChild}>{children}</Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Content side={side} className="max-w-64">