# Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
```tsx
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
export default function TooltipDemo() {
return (
}>Hover
Add to library
)
}
```
## Installation
1. Install the following dependencies:
```bash
npm install @base-ui/react @stylexjs/stylex
```
2. Set up the token layer and the StyleX compiler, if you have not already. See
[Installation](https://carbon.style/docs/installation), and paste `states.ts` and `state-styles.ts`
from the same page. `states.ts` provides the positioner's layer, and
`state-styles.ts` is how the popup and its arrow read their Base UI state.
3. Copy and paste the following code into your project.
```tsx title="components/ui/tooltip.tsx"
"use client"
import type { CSSProperties } from "react"
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
import * as stylex from "@stylexjs/stylex"
import type { StyleXStyles } from "@stylexjs/stylex"
import { stateStyles } from "@/lib/state-styles"
import { states } from "@/theme/states"
import { color, duration, ease, layer, leading, radius, space, text } from "@/theme/tokens.stylex"
const styles = stylex.create({
hidden: { opacity: 0 },
content: {
zIndex: layer.popup,
display: "inline-flex",
alignItems: "center",
gap: space.s1_5,
width: "fit-content",
maxWidth: "20rem",
borderRadius: radius.md,
paddingInline: space.s3,
paddingBlock: space.s1_5,
backgroundColor: color.foreground,
color: color.background,
boxShadow: `inset 0 1px 0 ${color.buttonPrimaryHighlight}, 0 4px 12px -2px ${color.popupShadowFar}`,
fontSize: text.xs,
lineHeight: leading.xs,
transformOrigin: "var(--transform-origin)",
transitionProperty: "opacity, transform",
transitionDuration: {
default: duration.fade,
"@media (prefers-reduced-motion: reduce)": "0s",
},
transitionTimingFunction: ease.standard,
},
instant: { transitionDuration: "0s" },
arrow: {
zIndex: layer.popup,
width: space.s2_5,
height: space.s2_5,
borderRadius: 2,
backgroundColor: color.foreground,
},
})
const arrowSides = stylex.create({
top: {
bottom: `calc(-1 * ${space.s2_5})`,
transform: "translateY(calc(-50% - 2px)) rotate(45deg)",
},
bottom: { top: space.s1, transform: "translateY(calc(-50% - 2px)) rotate(45deg)" },
left: { right: `calc(-1 * ${space.s1})`, transform: "rotate(45deg)" },
right: { left: `calc(-1 * ${space.s1})`, transform: "rotate(45deg)" },
"inline-start": { right: `calc(-1 * ${space.s1})`, transform: "rotate(45deg)" },
"inline-end": { left: `calc(-1 * ${space.s1})`, transform: "rotate(45deg)" },
})
const slide = stylex.create({
top: { transform: `scale(0.95) translateY(${space.s2})` },
bottom: { transform: `scale(0.95) translateY(calc(-1 * ${space.s2}))` },
left: { transform: `scale(0.95) translateX(${space.s2})` },
right: { transform: `scale(0.95) translateX(calc(-1 * ${space.s2}))` },
"inline-start": { transform: `scale(0.95) translateX(${space.s2})` },
"inline-end": { transform: `scale(0.95) translateX(calc(-1 * ${space.s2}))` },
})
type Overrides = { xstyle?: StyleXStyles; className?: string }
type StateOverrides = Overrides & { style?: CSSProperties }
function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
return
}
function Tooltip(props: TooltipPrimitive.Root.Props) {
return
}
function TooltipTrigger(props: TooltipPrimitive.Trigger.Props) {
return
}
type TooltipContentProps = Omit &
Pick &
StateOverrides
function TooltipContent({
xstyle,
style,
className,
side = "top",
sideOffset = 4,
align = "center",
alignOffset = 0,
children,
...props
}: TooltipContentProps) {
return (
[
styles.content,
(state.transitionStatus === "starting" || state.transitionStatus === "ending") &&
styles.hidden,
(state.transitionStatus === "starting" || state.transitionStatus === "ending") &&
slide[state.side],
state.instant && styles.instant,
xstyle,
],
{
className,
style,
},
)}
>
{children}
[styles.arrow, arrowSides[state.side]])}
/>
)
}
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
```
4. Update the import paths to match your project setup.
5. Wrap your app in the `TooltipProvider`.
```tsx title="main.tsx"
import "./styles/theme.css"
import "./styles/interop.css"
import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { TooltipProvider } from "@/components/ui/tooltip"
import App from "./App"
createRoot(document.getElementById("root")!).render(
,
)
```
## Usage
```tsx
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
```
```tsx
Hover
Add to library
```
## Composition
```text
TooltipProvider once, at the app root
└── Tooltip
├── TooltipTrigger
└── TooltipContent portal + positioner + popup + arrow
```
`TooltipTrigger` renders a `