Tooltip

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download tooltip -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { TooltipProvider } from "@/components/ui/tooltip";
import { Tooltip } from "@/components/ui/tooltip";
import { TooltipTrigger } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
import { TooltipContent } from "@/components/ui/tooltip";
import { reactive } from "vue";
import * as UI from "@/components/ui/tooltip";

const Component = UI.Tooltip;

const args = reactive(
  {
    "open": false,
    "side": "top",
    "text": "Add to library",
  } satisfies Partial<
    InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
  > &
    Record<string, unknown> & { side?: "top" | "right" | "bottom" | "left" },
);
</script>

<template>
  <TooltipProvider
    ><Tooltip v-model:open="args.open"
      ><TooltipTrigger as-child><Button>Hover me</Button></TooltipTrigger
      ><TooltipContent :side="args.side">{{
        args.text
      }}</TooltipContent></Tooltip
    ></TooltipProvider
  >
</template>

Examples

Default

<script setup lang="ts">
import { TooltipProvider } from "@/components/ui/tooltip";
import { Tooltip } from "@/components/ui/tooltip";
import { TooltipTrigger } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
import { TooltipContent } from "@/components/ui/tooltip";
import * as UI from "@/components/ui/tooltip";

const Component = UI.Tooltip;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <TooltipProvider
    ><Tooltip v-bind="args"
      ><TooltipTrigger as-child
        ><Button variant="tertiary">Hover</Button></TooltipTrigger
      ><TooltipContent><p>Add to library</p></TooltipContent></Tooltip
    ></TooltipProvider
  >
</template>

Sides

<script setup lang="ts">
import { TooltipProvider } from "@/components/ui/tooltip";
import { Tooltip } from "@/components/ui/tooltip";
import { TooltipTrigger } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
import { TooltipContent } from "@/components/ui/tooltip";
import * as UI from "@/components/ui/tooltip";

const Component = UI.Tooltip;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <TooltipProvider
    ><div class="flex items-center gap-2">
      <Tooltip
        ><TooltipTrigger as-child
          ><Button variant="tertiary">Top</Button></TooltipTrigger
        ><TooltipContent side="top"><p>Top side</p></TooltipContent></Tooltip
      ><Tooltip
        ><TooltipTrigger as-child
          ><Button variant="tertiary">Right</Button></TooltipTrigger
        ><TooltipContent side="right"
          ><p>Right side</p></TooltipContent
        ></Tooltip
      ><Tooltip
        ><TooltipTrigger as-child
          ><Button variant="tertiary">Bottom</Button></TooltipTrigger
        ><TooltipContent side="bottom"
          ><p>Bottom side</p></TooltipContent
        ></Tooltip
      ><Tooltip
        ><TooltipTrigger as-child
          ><Button variant="tertiary">Left</Button></TooltipTrigger
        ><TooltipContent side="left"><p>Left side</p></TooltipContent></Tooltip
      >
    </div></TooltipProvider
  >
</template>

Alignments

<script setup lang="ts">
import { TooltipProvider } from "@/components/ui/tooltip";
import { Tooltip } from "@/components/ui/tooltip";
import { TooltipTrigger } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
import { TooltipContent } from "@/components/ui/tooltip";
import * as UI from "@/components/ui/tooltip";

const Component = UI.Tooltip;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <TooltipProvider
    ><div class="flex gap-4">
      <Tooltip v-for="align in ['start', 'center', 'end']" :key="align"
        ><TooltipTrigger as-child
          ><Button>{{ align }}</Button></TooltipTrigger
        ><TooltipContent :align="align">Tooltip</TooltipContent></Tooltip
      >
    </div></TooltipProvider
  >
</template>

Logical Sides

<script setup lang="ts">
import { TooltipProvider } from "@/components/ui/tooltip";
import { Tooltip } from "@/components/ui/tooltip";
import { TooltipTrigger } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
import { TooltipContent } from "@/components/ui/tooltip";
import * as UI from "@/components/ui/tooltip";

const Component = UI.Tooltip;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <TooltipProvider
    ><div dir="rtl" class="flex gap-4">
      <Tooltip v-for="side in ['left', 'right']" :key="side"
        ><TooltipTrigger as-child
          ><Button>{{ side }}</Button></TooltipTrigger
        ><TooltipContent :side="side">Tooltip</TooltipContent></Tooltip
      >
    </div></TooltipProvider
  >
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

This component adds no props of its own to Reka UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.