Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Preview

Hover

Code

import Button from '@dinui/react/button'
import Tooltip from '@dinui/react/tooltip'

export default function TooltipDemo() {
  return (
    <Tooltip.Provider delayDuration={400}>
      <Tooltip>
        <Tooltip.Trigger asChild>
          <Button variant="outline">Hover</Button>
        </Tooltip.Trigger>

        <Tooltip.Content>Add to library</Tooltip.Content>
      </Tooltip>
    </Tooltip.Provider>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add tooltip

   yarn

   yarn dlx @dinui/cli@latest add tooltip

   pnpm

   pnpm dlx @dinui/cli@latest add tooltip

   bun

   bunx @dinui/cli@latest add tooltip

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-tooltip tailwind-variants

   yarn

   yarn add @radix-ui/react-tooltip tailwind-variants

   pnpm

   pnpm add @radix-ui/react-tooltip tailwind-variants

   bun

   bun add @radix-ui/react-tooltip tailwind-variants

3. Copy and paste the following code into your project

   'use client'
   
   import * as TooltipPrimitive from '@radix-ui/react-tooltip'
   import { forwardRef } from 'react'
   import { tv } from 'tailwind-variants'
   
   const tooltip = tv({
     slots: {
       content: [
         'z-50 overflow-hidden rounded-md',
         'bg-reverse px-3 py-1.5 text-xs',
         'animate-in data-[state=closed]:animate-out',
         'fade-in-0 data-[state=closed]:fade-out-0',
         'zoom-in-95 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',
       ],
     },
   })
   
   const TooltipContent = forwardRef<
     React.ElementRef<typeof TooltipPrimitive.Content>,
     React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
   >((props, ref) => {
     const { content } = tooltip()
   
     return (
       <TooltipPrimitive.Content
         sideOffset={4}
         {...props}
         ref={ref}
         className={content({ className: props.className })}
       />
     )
   })
   TooltipContent.displayName = TooltipPrimitive.Content.displayName
   
   const Tooltip = Object.assign(TooltipPrimitive.Root, {
     Provider: TooltipPrimitive.Provider,
     Trigger: TooltipPrimitive.Trigger,
     Content: TooltipContent,
   })
   
   export default Tooltip
   export { tooltip, TooltipPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.