Docs
Tooltip

Tooltip

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

DocsAPI Reference

Installation

Install the following dependencies:

npm install @radix-ui/react-tooltip

Copy and paste the following code into your project.

'use client';
 
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import clsx from 'clsx';
import * as React from 'react';
import styles from './styles.module.scss';
 
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.Content
        ref={ref}
        sideOffset={sideOffset}
        className={clsx(styles.tooltip, className)}
        {...props}
    />
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

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>