Merge pull request #32 from FiligranHQ/issue/tooltip

[filigran-ui] - Create tooltip

packages/filigran-ui/package.json

@@ -49,6 +49,7 @@
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-tabs": "1.1.0",
     "@radix-ui/react-toast": "1.2.1",
+    "@radix-ui/react-tooltip": "1.1.4",
     "@tanstack/react-table": "8.19.2",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",

packages/filigran-ui/src/components/clients/index.ts

@@ -18,4 +18,5 @@ export * from './tabs'
 export * from './tag-input/tag-input'
 export * from './toast'
 export * from './toaster'
+export * from './tooltip'
 export * from './use-toast'

packages/filigran-ui/src/components/clients/tooltip.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import * as React from 'react'
+
+import {cn} from '../../lib/utils'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({className, sideOffset = 4, ...props}, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      side="bottom"
+      className={cn(
+        'z-50 overflow-hidden rounded-lg bg-gray-800 dark:bg-gray-1000 px-3 py-1.5 text-xs text-gray-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger}

projects/filigran-website/content/docs/components/tooltip.mdx

@@ -0,0 +1,54 @@
+---
+title: Tooltip
+---
+
+# Tooltip Example
+
+<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger>Hover me!</TooltipTrigger>
+    <TooltipContent>
+      This is a tooltip
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>
+
+
+## How to use this tooltip
+
+### Props
+| Name                          | Type                        | Default      | Description                                                                                                                                          |
+| -------------                 | --------                    | -----------  | -----------------------------------------------------------------------------------------                                                            |
+| **delayDuration**             | *number*                    | 700          | The duration from when the mouse enters a tooltip trigger until the tooltip opens.                                                                   |
+| **skipDelayDuration**         | *number*                    | 300          | How much time a user has to enter another trigger without incurring a delay again.                                                                   |
+| **disableHoverableContent**   | *boolean*                   | -            | Prevents Tooltip.Content from remaining open when hovering. Disabling this has accessibility consequences.                                           |
+| **defaultOpen**               | *boolean*                   | -            | The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.                                     |
+| **open**                      | *boolean*                   | -            |The controlled open state of the tooltip. Must be used in conjunction with onOpenChange.                                                              |
+| **onOpenChange**              | *(open: boolean) => void*   | -            |Event handler called when the open state of the tooltip changes.                                                                                      |
+| **delayDuration**             | *number*                    | -            |Override the duration given to the `Provider` to customise the open delay for a specific tooltip.                                                     |
+| **disableHoverableContent**   | *boolean*                   | -            |Prevents Tooltip.Content from remaining open when hovering. Disabling this has accessibility consequences. Inherits from Tooltip.Provider.            |
+
+
+### Playground
+
+
+*Import from filigran-ui :*
+
+Import \{Tooltip,
+TooltipContent,
+TooltipProvider,
+TooltipTrigger,\} from 'filigran-ui'
+
+<ReactLiveDisplay
+  displayError={false}
+  codeExample={`
+          <TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger>Hover</TooltipTrigger>
+    <TooltipContent>
+      <p>Add to library</p>
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>
+`}
+/>