Allow to customize tooltip content

Author: buberdds

src/components/tooltip/index.tsx

@@ -1,18 +1,24 @@
 import * as React from 'react'
 import { Tooltip as BaseTooltip, TooltipTrigger, TooltipContent } from '../ui/tooltip'
+import { cn } from '../../lib/utils'
 
 type TooltipProps = React.ComponentProps<typeof BaseTooltip> & {
+  className?: string
   title: React.ReactNode
 } & Pick<React.ComponentProps<typeof TooltipContent>, 'side' | 'sideOffset' | 'align'>
 
 const TooltipContentNoArrow = ({
+  className,
   children,
   sideOffset = 8, // Needed when arrow is hidden
   ...props
 }: React.ComponentProps<typeof TooltipContent>) => {
   return (
     <TooltipContent
-      className="[&>span]:hidden max-w-[400px] text-pretty bg-popover border text-popover-foreground text-sm shadow-[0px_2px_4px_-1px_rgba(0,0,0,0.06)] shadow-md"
+      className={cn(
+        '[&>span]:hidden max-w-[400px] text-pretty bg-popover border text-popover-foreground text-sm shadow-md z-[9999]',
+        className
+      )}
       sideOffset={sideOffset}
       {...props}
     >
@@ -21,11 +27,11 @@ const TooltipContentNoArrow = ({
   )
 }
 
-export const Tooltip = ({ title, children, side, sideOffset, align, ...props }: TooltipProps) => {
+export const Tooltip = ({ className, title, children, side, sideOffset, align, ...props }: TooltipProps) => {
   return (
     <BaseTooltip {...props}>
       <TooltipTrigger asChild>{children}</TooltipTrigger>
-      <TooltipContentNoArrow side={side} sideOffset={sideOffset} align={align}>
+      <TooltipContentNoArrow className={className} side={side} sideOffset={sideOffset} align={align}>
         {title}
       </TooltipContentNoArrow>
     </BaseTooltip>