Tooltip

نصب

pnpm dlx @simurgh-ui/cli add tooltip

import { Tooltip, TooltipTrigger, TooltipContent } from '@simurgh-ui/react/tooltip';
import { Tooltip as VueTooltip, TooltipTrigger as VueTooltipTrigger, TooltipContent as VueTooltipContent } from '@simurgh-ui/vue/tooltip';
import { TooltipComponent } from '@simurgh-ui/angular/tooltip';
import '@simurgh-ui/styles/tooltip.css';

پیش‌نمایش واقعی

Live component Tooltip ◆

Copy link

استفاده

React

<Tooltip>
  <TooltipTrigger aria-label="کپی نشانی">کپی</TooltipTrigger>
  <TooltipContent>کپی نشانی</TooltipContent>
</Tooltip>

Vue

<Tooltip>
  <TooltipTrigger aria-label="کپی نشانی">کپی</TooltipTrigger>
  <TooltipContent>کپی نشانی</TooltipContent>
</Tooltip>

Angular

<simurgh-tooltip>
  <button trigger aria-label="کپی نشانی">کپی</button>
  <span>کپی نشانی</span>
</simurgh-tooltip>

Tooltip فقط برای توضیح تکمیلی کوتاه است و نباید کنترل تعاملی در خود داشته باشد. محتوا هم با hover و هم با focus ظاهر می‌شود و role="tooltip" دارد. برای اطلاعات ضروری یا تعاملی از محتوای درون‌صفحه‌ای یا Popover استفاده کنید.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.