# TooltipPopover
A hover Tooltip at desktop that becomes a tap-to-open Popover below 768px.
A drop-in replacement for the shadcn
[Tooltip](https://ui.shadcn.com/docs/components/tooltip): at 768px and up it
renders your Tooltip unchanged; below, the same children render inside your
[Popover](https://ui.shadcn.com/docs/components/popover). Hover does not exist
on touch, so a tooltip never opens under a finger; a Popover opens on tap. The
[breakpoint](/docs/breakpoint) and the [override prop](/docs/override-prop)
work the same for every pair, so this page covers only what is specific to
this one.
Use it for infotips, where the trigger only reveals the tip. Keep the shadcn
Tooltip, with an `aria-label`, on action buttons: see
[Infotips, not action buttons](#infotips-not-action-buttons). It works on Base
UI and Radix; React Aria is not supported.
```tsx
import { InfoIcon } from "lucide-react"
import {
TooltipPopover,
TooltipPopoverContent,
TooltipPopoverTrigger,
} from "@/components/ui/tooltip-popover"
export function ResponseRateInfo() {
return (
Response rate: 98%
The share of messages you reply to within 24 hours.
)
}
```
## Installation
```bash
npx shadcn@latest add @alexandrejoly/tooltip-popover
```
Update the import paths to match your project setup.
## Migrating
Change the imports and rename the tags: `Tooltip` becomes `TooltipPopover`,
`TooltipTrigger` becomes `TooltipPopoverTrigger`, `TooltipContent` becomes
`TooltipPopoverContent`, with the same props and children
(see [Migrating](/docs/installation#migrating)). Leave `TooltipProvider` as
it is, imported from `@/components/ui/tooltip` at the root of your app: it has
no `TooltipPopover` counterpart.
## Usage
```tsx
import {
TooltipPopover,
TooltipPopoverContent,
TooltipPopoverTrigger,
} from "@/components/ui/tooltip-popover"
```
```tsx
Response rate
The share of messages you reply to within 24 hours.
```
## Composition
```txt
TooltipPopover
├── TooltipPopoverTrigger
└── TooltipPopoverContent
```
## Infotips, not action buttons
Below 768px the trigger opens the popover on tap, and its own `onClick` still
runs. A tooltip on an action button (Delete, Copy, a button that opens a
dialog or a menu) would run the action and open a popover with the same tap.
Migrate only the tooltips whose trigger exists to reveal the tip. Links and
form fields used as triggers also open the popover on tap.
## TooltipProvider
`TooltipProvider` stays the app-level shadcn setup, imported from your
Tooltip. On Radix it is required: the desktop Tooltip throws without it. On
Base UI it is optional and groups tooltip delays. It renders no element, so it
does not affect the Popover below 768px.
## The trigger across the breakpoint
The trigger is a different component on each side, so it remounts when the
window crosses 768px, and once after hydration on a small screen. Keep its
children stateless.
## The content box
A tooltip and a popover have different sizes and defaults. Each side keeps its
own, as everywhere in responsivecn:
- **Width:** the Tooltip fits its text (`w-fit max-w-xs`); the Popover is a
fixed `w-72` card with padding.
- **Side:** with no `side` on the Content, the Tooltip opens on top and the
Popover on the bottom.
- **Offset (Radix):** with no `sideOffset`, the Tooltip sits at `0` and the
Popover at `4`.
Set the prop on the Content for both sides, or in `popover={{...}}` for the
Popover only. For a one-line tip, size the Popover to its text:
```tsx
```
## Overriding the Popover
Everything inside `popover={{...}}` is your installed Popover's own API, on the
root, the Trigger and the Content:
```tsx
Info
…
```
The override is typed on your own Popover, so it takes only what your base
has. On Base UI, `popover={{ openOnHover: true }}` on the Trigger also opens
the Popover on hover for devices that have both.
`popover` is also a native HTML attribute (the Popover API). The parts use
the name for the override, so the native attribute cannot be passed through.
## Disabled
On Base UI, `disabled` on `TooltipPopover` or on `TooltipPopoverTrigger`
keeps the tip closed and leaves the trigger usable. Below 768px it does the
same: the Popover stays closed and the trigger button stays enabled.
## Trigger elements
On Base UI, a trigger rendered as another element (`render={}`,
``) gets button semantics below 768px without extra props. For a component
that renders something other than a `