Tooltip

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

followCursor

side

sideOffset

align

alignOffset

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'

withDefaults(
  defineProps<{
    side?: 'top' | 'right' | 'bottom' | 'left'
    sideOffset?: number
    align?: 'start' | 'center' | 'end'
    alignOffset?: number
    followCursor?: boolean | 'x' | 'y'
  }>(),
  { side: 'top', sideOffset: 0, align: 'center', alignOffset: 0, followCursor: false },
)
</script>

<template>
  <TooltipProvider>
    <Tooltip :follow-cursor="followCursor">
      <TooltipTrigger as-child>
        <Button variant="outline">
          Hover
        </Button>
      </TooltipTrigger>
      <TooltipContent :side="side" :side-offset="Number(sideOffset)" :align="align" :align-offset="Number(alignOffset)">
        <p>Add to library</p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</template>

Installation

Install the packages

npm install @animate-ui/vue motion-v

pnpm add @animate-ui/vue motion-v

yarn add @animate-ui/vue motion-v

bun add @animate-ui/vue motion-v

Add the shadcn-vue component

npx shadcn-vue@latest add tooltip

pnpm dlx shadcn-vue@latest add tooltip

yarn dlx shadcn-vue@latest add tooltip

bun x shadcn-vue@latest add tooltip

Animate it

The CLI finds your shadcn-vue components through components.json, swaps their primitive imports for Animate UI's and removes the CSS animation classes Motion replaces.

npx @animate-ui/cli@latest animate tooltip

pnpm dlx @animate-ui/cli@latest animate tooltip

yarn dlx @animate-ui/cli@latest animate tooltip

bun x @animate-ui/cli@latest animate tooltip

Usage

<script setup lang="ts">
import {
  TooltipContent,
  TooltipPortal,
  TooltipProvider,
  TooltipRoot,
  TooltipTrigger,
} from '@animate-ui/vue/primitives/reka-ui';
</script>

<template>
  <TooltipProvider>
    <TooltipRoot>
      <TooltipTrigger>Hover</TooltipTrigger>
      <TooltipPortal>
        <TooltipContent>Add to library</TooltipContent>
      </TooltipPortal>
    </TooltipRoot>
  </TooltipProvider>
</template>

Animation

The motion of Animate UI's React Tooltip, starting from 0.7, with a warm-up:

Content grows from 0.7 and fades in, from the trigger (--reka-tooltip-content-transform-origin), on a spring (stiffness 400, damping 29) that overshoots a little before it settles.
It closes the same way: it shrinks back to 0.7 on the same spring while it fades out, then unmounts.
Tooltips warm up: once one is open, moving along a toolbar shows the next one at once, without its entrance, and hides the previous one at once. 300ms after the last one closed, the next one plays its entrance again. Animate UI tracks it across all of its tooltips, whatever their Provider.
reka-ui only opens it on hover for mouse-like pointers, and on keyboard focus.
With force-mount (on the Content or the Portal), the closed content stays in the DOM: it plays its exit, then is hidden and inert.
Open from the start (default-open), it plays the same entrance on page load.
With follow-cursor on the Root, the content leans towards the pointer while it moves over the trigger, by half its offset from the trigger's center, on a spring (stiffness 200, damping 17): on both axes, or only 'x' or 'y'. Under reduced motion it follows without the spring.
Under reduced motion, it only fades (no scale).