Tooltip

<GoopTooltipProvider>
  <GoopTooltip>
    <GoopTooltipTrigger as-child>
      <GoopButton variant="outline">Hover me</GoopButton>
    </GoopTooltipTrigger>
    <GoopTooltipContent>Add to library</GoopTooltipContent>
  </GoopTooltip>
</GoopTooltipProvider>

GoopTooltip wraps the same reka-ui Tooltip primitive as shadcn-vue's Tooltip, with the same API. Delays, hover and focus handling, and positioning work the same. Swap the imports and you're done.

Installation#

Nuxt#

pnpm add @goopui/nuxt

export default defineNuxtConfig({
  modules: ['@goopui/nuxt'],
})

The module auto-imports every GoopTooltip* part, adds goop.css, and points Tailwind at the component classes. It needs Tailwind CSS v4 and the shadcn tokens (--foreground, --background, --radius).

Vue#

pnpm add @goopui/vue

@import "tailwindcss";
@import "@goopui/vue/goop.css";

Usage#

Wrap your app (or the part that has tooltips) in a GoopTooltipProvider once. It sets delayDuration to 0, like shadcn.

<script setup lang="ts">
// Nuxt auto-imports these. In plain Vue, import them:
import { GoopButton, GoopTooltip, GoopTooltipContent, GoopTooltipProvider, GoopTooltipTrigger } from '@goopui/vue'
</script>

<template>
  <GoopTooltipProvider>
    <GoopTooltip>
      <GoopTooltipTrigger as-child>
        <GoopButton variant="outline">Hover me</GoopButton>
      </GoopTooltipTrigger>
      <GoopTooltipContent>Add to library</GoopTooltipContent>
    </GoopTooltip>
  </GoopTooltipProvider>
</template>

The parts are GoopTooltipProvider, GoopTooltip, GoopTooltipTrigger, and GoopTooltipContent. All the goo lives on GoopTooltipContent.

Behavior#

It's the Popover's emerge engine, scaled down for a small label:

• Open (bloom). The label pools from its own center, spreads out with a lobed edge, overshoots, and settles. It's quick: about a third of a second at the default preset.
• Light slosh. The edges bulge a little and settle (openSlosh, 0.4 strength by default).
• Light splash. A few small drops fly off and keep clear of the trigger. It's much lighter than the Popover's (openDrips, and the openDrip* knobs to turn it up).
• Close. The label pulls in with a light wobble (closeSlosh, 0.5) and shrinks back to its center.

flowStyle="neck" runs it out of the trigger through a neck instead. :flow="false" gives the older open: a small bulb swells out of the trigger edge, the label inflates out of it, and the neck snaps. That open has no drips unless you turn openDrips on.

• Text stays sharp. Only the background is goo, drawn behind the label.

Inverted tokens#

Like shadcn's tooltip, it's inverted: a --foreground background with --background text. That is the default here too, and the arrow matches. A tooltip is a label, not an extension of its trigger, so unlike the Popover the default surface is 'popover' (shadcn's inverted look), not 'trigger'.

Sides#

side, align, and sideOffset are reka-ui's:

<GoopTooltipContent side="right">Tooltip on the right</GoopTooltipContent>

Surface color and drips#

Set surface="trigger" to use the trigger's background and text color, or pass any CSS color. The text and the arrow follow. :open-drips sets the splash:

<GoopTooltipContent surface="trigger">Takes the trigger's color</GoopTooltipContent>
<GoopTooltipContent surface="oklch(0.62 0.19 150)">Any CSS color</GoopTooltipContent>
<GoopTooltipContent :open-drips="false">No splash</GoopTooltipContent>
<GoopTooltipContent :open-drips="1.5">A bigger splash</GoopTooltipContent>

Plain shadcn#

:goo="false" renders exactly shadcn's TooltipContent, with its own enter and exit animation.

Driving it from code#

GoopTooltipContent exposes its engine handle as handle (null before it mounts, or when goo is off).

Props#

GoopTooltipProvider, GoopTooltip, and GoopTooltipTrigger take shadcn-vue's props. GoopTooltipContent takes reka-ui's TooltipContent props (side, align, sideOffset, ...), class, and these goo props. sideOffset defaults to 0, like shadcn.

Accessibility#

Hover and keyboard focus open it, Escape closes it, and the content has role="tooltip" and is linked to the trigger, all from reka-ui. The goo surface is aria-hidden. Under reduced motion the tooltip opens and closes plainly: it keeps its goo shape and color, with no bloom, bridge, slosh, drops, or wobble. See Accessibility & reduced motion.