Tooltip

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from "@line/abc-def-react/tooltip";

<script setup lang="ts">
import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from "@line/abc-def-vue/tooltip";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import { Button } from "@line/abc-def-react/button";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@line/abc-def-react/tooltip";

export function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild><Button variant="outline">Hover</Button></TooltipTrigger>
        <TooltipContent>Shared token contract</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

<script setup lang="ts">
import { Button } from "@line/abc-def-vue/button";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@line/abc-def-vue/tooltip";
</script>

<template>
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger :as-child="true">
        <Button variant="outline">Hover</Button>
      </TooltipTrigger>
      <TooltipContent>Shared token contract</TooltipContent>
    </Tooltip>
  </TooltipProvider>
</template>

Component tokens

Composition exports

Usage notes

• Keep tooltip text short.
• Do not put required instructions only in tooltips.
• Related component tokens use the `tooltip` token group in `@line/abc-def-styles/css`.