feat(react): add new component tooltip (#64)

Close #44

README.md

@@ -58,7 +58,7 @@ _Display_
 - [x] Alert Dialog
 - [x] Badge
 - [ ] Menu
-- [ ] Tooltips
+- [x] Tooltips
 - [x] Tables
 - [ ] Code block
 

examples/with-vitejs/src/App.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, ScrollArea, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@openui-org/react'
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, ScrollArea, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@openui-org/react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import imgPrueba from '/bghome.png'
@@ -248,7 +248,16 @@ function App() {
           </TableRow>
         </TableFooter>
       </Table>
-
+      <div className="flex justify-center p-10">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger>Hover</TooltipTrigger>
+            <TooltipContent>
+              <p>Add to library</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
     </>
   )
 }

packages/react/package.json

@@ -33,6 +33,7 @@
     "@radix-ui/react-separator": "1.0.3",
     "@radix-ui/react-slider": "1.1.2",
     "@radix-ui/react-slot": "1.0.2",
+    "@radix-ui/react-tooltip": "1.0.7",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.0",
     "embla-carousel-react": "8.0.0",

packages/react/src/components/tooltip.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { cn } from '../lib/cn'
+import { Button } from './button'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+function TooltipTrigger({
+  className,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <TooltipPrimitive.Trigger asChild>
+      <Button className={cn('hover:bg-dark-500/30 border border-dark-500/30', className)} {...props} />
+    </TooltipPrimitive.Trigger>
+  )
+}
+
+TooltipTrigger.displayName = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 overflow-hidden rounded-md border border-dark-500 bg-dark-900/100 px-3 py-1.5 text-sm text-popover-foreground shadow-md',
+      className,
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

packages/react/src/index.ts

@@ -20,3 +20,4 @@ export * from './components/separator'
 export * from './components/checkbox'
 export * from './components/scroll-area'
 export * from './components/menu'
+export * from './components/tooltip'