---
title: Tooltip
description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
base: base
component: true
links:
doc: https://base-ui.com/react/components/tooltip
api: https://base-ui.com/react/components/tooltip#api-reference
---
## Installation
Command
Manual
Run the following command:
```bash
npx shadcn@latest add tooltip
```
Add the `TooltipProvider` to the root of your app.
```tsx title="app/layout.tsx" showLineNumbers {1,7}
import { TooltipProvider } from "@/components/ui/tooltip"
export default function RootLayout({ children }) {
return (
{children}
)
}
```
Install the following dependencies:
```bash
npm install @base-ui/react
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
Add the `TooltipProvider` to the root of your app.
```tsx title="app/layout.tsx" showLineNumbers {1,7}
import { TooltipProvider } from "@/components/ui/tooltip"
export default function RootLayout({ children }) {
return (
{children}
)
}
```
## Usage
```tsx showLineNumbers
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip"
```
```tsx showLineNumbers
Hover
Add to library
```
## Examples
### Side
Use the `side` prop to change the position of the tooltip.
### With Keyboard Shortcut
### Disabled Button
Show a tooltip on a disabled button by wrapping it with a span.
## RTL
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
## API Reference
See the [Base UI Tooltip](https://base-ui.com/react/components/tooltip#api-reference) documentation.