Radix UIKeyframes

Tooltip

The one Radix primitive that never writes open. Both of its open values had to be added to the vocabulary by name.

Every value the manifest allows on this host, single presets and the pairs that compose. The first is what this component ships with. Both stages are the same component, so anything that changes between them is the attribute.

withoutno attribute

with easefuldata-motion="scale-fade"

host writes

data-state="delayed-open" | "instant-open" | "closed"

easeful matches

[data-motion~="scale-fade"][data-state="delayed-open"]

what runs

animation: motion-enter 200ms

you write

<Tooltip.Content data-motion="scale-fade" />

Where the attribute goes

The parts this demo composes, and the value each one carries. Everything inside an animated part is that part's content, so the tree stops there.

Tooltip.Provider
Tooltip.Root
Tooltip.Trigger
Tooltip.Portal
Tooltip.Contentdata-motion="scale-fade"

Source

apps/docs/components/demos/radix/tooltip.tsx

19 lines

"use client"

import { Tooltip } from "radix-ui"
import type { DemoProps } from "@/components/demos/props"

export function RadixTooltip({ motion }: DemoProps) {
  return (
    <Tooltip.Provider delayDuration={120}>
      <Tooltip.Root>
        <Tooltip.Trigger className="btn">Hover me</Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Content className="panel" sideOffset={10} collisionPadding={16} data-motion={motion}>
            <p className="panel__body">Opens as delayed-open, never as open.</p>
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  )
}

The whole file, read from disk at build time. Both copies above render from it, and the motion prop is the only difference between them.