Tooltip 文字提示

Preview

Code

import { Button } from "@scopify/ui/shadcn/components/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@scopify/ui/shadcn/components/tooltip"

export function TooltipDemo() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Hover</Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Add to library</p>
      </TooltipContent>
    </Tooltip>
  )
}

Scopify 说明

本页按 shadcn/ui 官方 Radix UI 组件文档的章节与示例完整整理。示例预览使用 Scopify 当前的 @scopify/ui/shadcn 实现；导入路径、主题 Token 和行为差异以本仓库源码为准。

Installation

Run the following command:

npx shadcn@latest add tooltip

Add the `TooltipProvider` to the root of your app.

app/layout.tsx

import { TooltipProvider } from "@scopify/ui/shadcn/components/tooltip"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <TooltipProvider>{children}</TooltipProvider>
      </body>
    </html>
  )
}

Usage

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@scopify/ui/shadcn/components/tooltip"

<Tooltip>
  <TooltipTrigger>Hover</TooltipTrigger>
  <TooltipContent>
    <p>Add to library</p>
  </TooltipContent>
</Tooltip>

Composition

Use the following composition to build a Tooltip:

Tooltip
├── TooltipTrigger
└── TooltipContent

Side

Use the side prop to change the position of the tooltip.

Preview

Code

import { Button } from "@scopify/ui/shadcn/components/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@scopify/ui/shadcn/components/tooltip"

export function TooltipSides() {
  return (
    <div className="flex flex-wrap gap-2">
      {(["left", "top", "bottom", "right"] as const).map((side) => (
        <Tooltip key={side}>
          <TooltipTrigger asChild>
            <Button variant="outline" className="w-fit capitalize">
              {side}
            </Button>
          </TooltipTrigger>
          <TooltipContent side={side}>
            <p>Add to library</p>
          </TooltipContent>
        </Tooltip>
      ))}
    </div>
  )
}

With Keyboard Shortcut

Preview

Code

import { SaveIcon } from "lucide-react"

import { Button } from "@scopify/ui/shadcn/components/button"
import { Kbd } from "@scopify/ui/shadcn/components/kbd"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@scopify/ui/shadcn/components/tooltip"

export function TooltipKeyboard() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline" size="icon-sm">
          <SaveIcon />
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        Save Changes <Kbd>S</Kbd>
      </TooltipContent>
    </Tooltip>
  )
}

Disabled Button

Show a tooltip on a disabled button by wrapping it with a span.

Preview

Code

import { Button } from "@scopify/ui/shadcn/components/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@scopify/ui/shadcn/components/tooltip"

export function TooltipDisabled() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <span className="inline-block w-fit">
          <Button variant="outline" disabled>
            Disabled
          </Button>
        </span>
      </TooltipTrigger>
      <TooltipContent>
        <p>This feature is currently unavailable</p>
      </TooltipContent>
    </Tooltip>
  )
}

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

Preview

Code

"use client"

import {
  useTranslation,
  type Translations,
} from "@/components/language-selector"
import { Button } from "@/styles/radix-nova/ui-rtl/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/styles/radix-nova/ui-rtl/tooltip"

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {
      content: "Add to library",
      left: "Left",
      top: "Top",
      bottom: "Bottom",
      right: "Right",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      content: "إضافة إلى المكتبة",
      left: "يسار",
      top: "أعلى",
      bottom: "أسفل",
      right: "يمين",
    },
  },
  he: {
    dir: "rtl",
    values: {
      content: "הוסף לספרייה",
      left: "שמאל",
      top: "למעלה",
      bottom: "למטה",
      right: "ימין",
    },
  },
}

const sides = ["left", "top", "bottom", "right"] as const

export function TooltipRtl() {
  const { t } = useTranslation(translations, "ar")

  return (
    <div className="flex flex-wrap gap-2">
      {sides.map((side) => (
        <Tooltip key={side}>
          <TooltipTrigger asChild>
            <Button variant="outline" className="w-fit capitalize">
              {t[side]}
            </Button>
          </TooltipTrigger>
          <TooltipContent side={side}>{t.content}</TooltipContent>
        </Tooltip>
      ))}
    </div>
  )
}

API Reference

See the Radix Tooltip documentation.

InstallationCopy Anchor Link

Run the following command:

Add the TooltipProvider to the root of your app.

UsageCopy Anchor Link

CompositionCopy Anchor Link

SideCopy Anchor Link

With Keyboard ShortcutCopy Anchor Link

Disabled ButtonCopy Anchor Link

RTLCopy Anchor Link

API ReferenceCopy Anchor Link

本页内容

Installation

Add the `TooltipProvider` to the root of your app.

Usage

Composition

Side

With Keyboard Shortcut

Disabled Button

RTL

API Reference