Shadow Panda
Shadow Panda
Component
Tooltip

Tooltip

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

shadcn/uiRadix UIAPI Reference

Installation

Install the following dependencies

npm i @radix-ui/react-tooltip

Copy and paste the following code into your project

components/ui/tooltip/index.tsx
'use client'
 
import * as TooltipPrimitive from '@radix-ui/react-tooltip'
import { createStyleContext } from '@shadow-panda/style-context'
import { styled } from '@shadow-panda/styled-system/jsx'
import { tooltip } from '@shadow-panda/styled-system/recipes'
 
const { withProvider, withContext } = createStyleContext(tooltip)
 
export const TooltipProvider = TooltipPrimitive.Provider
export const Tooltip = withProvider(styled(TooltipPrimitive.Root), 'root')
export const TooltipTrigger = withContext(styled(TooltipPrimitive.Trigger), 'trigger')
export const TooltipContent = withContext(styled(TooltipPrimitive.Content), 'content', {
  sideOffset: 4,
})

Update the import paths to match your project setup

Usage

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>
Toggle