تلميح الأداة
نافذة معلومات صغيرة تظهر عند التحويم، تدعم مواضع المنقار (أعلى, أسفل, يسار, يمين, بلا) ومتغيّرات الألوان.
Loading demo: tooltip-real-world
التثبيت
npx sdaia-ui@latest add tooltip
الاستخدام
import { Tooltip } from "@/components/ui/tooltip"<Tooltip />الأمثلة
الهوية
تلميح الأداة بنوع العلامة التجارية.
Loading demo: tooltip-brand
محايد
تلميح الأداة بألوان محايدة.
Loading demo: tooltip-neutral
منقار أعلى
تلميح الأداة مع المنقار في موضع أعلى.
Loading demo: tooltip-beak-top
منقار يسار
تلميح الأداة مع المنقار في موضع يسار.
Loading demo: tooltip-beak-left
تلميح الأداة بنوع العلامة التجارية والمنقار في موضع يسار.
Loading demo: tooltip-brand-beak-bottom
مرجع الواجهة البرمجية
TooltipProps
خصائص مكوّن Tooltip.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'neutral' | 'brand' | 'neutral' | optional |
beakPlacement | 'none' | 'top' | 'bottom' | 'left' | 'right' | 'none' | optional |
beakAlignment | 'start' | 'centre' | 'end' | 'start' | optional |
title | ReactNode | - | optional |
description | ReactNode | - | optional |
icon | ReactNode | boolean | - | optional |
media | ReactNode | - | optional |
primaryAction | TooltipAction | - | optional |
secondaryAction | TooltipAction | - | optional |
link | TooltipLinkAction | - | optional |
counting | ReactNode | - | optional |