Tooltip (تلميح)

يُستخدم غالبًا لعرض معلومات التلميح عند تمرير الفأرة.

الاستخدام الأساسي

الموضع وطريقة الإطلاق

import { LhButton, LhTooltip } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhTooltip content="تلميح علوي" placement="top">
        <LhButton>أعلى</LhButton>
      </LhTooltip>
      <LhTooltip content="إطلاق بالنقر" trigger="click">
        <LhButton>انقر</LhButton>
      </LhTooltip>
      <LhTooltip content="تلميح باللون الدلالي" type="success">
        <LhButton>لون دلالي</LhButton>
      </LhTooltip>
    </>
  )
}

Tooltip Props

الخاصية	الوصف	النوع	القيم المتاحة	الافتراضي
content	محتوى التلميح	string	—	—
placement	موضع العرض	LhTooltipPlacement	top / bottom / left / right (شاملًا -start / -end)	'top'
trigger	طريقة الإطلاق	'hover' | 'click' | 'focus'	—	'hover'
disabled	تعطيل التلميح	boolean	—	false
visible	الظهور المتحكَّم به	boolean	—	—
defaultVisible	الظهور الافتراضي غير المتحكَّم به	boolean	—	false
showAfter / openDelay	تأخير الإظهار (بالملي ثانية، اسمان لنفس الخاصية)	number	—	0
hideAfter / closeDelay	تأخير الإخفاء (بالملي ثانية، اسمان لنفس الخاصية)	number	—	0
effect	السمة	'dark' | 'light'	—	'dark'
type	نوع اللون الدلالي (يتجاوز لون خلفية effect)	'primary' | 'success' | 'warning' | 'danger' | 'info'	—	—
bgColor	لون خلفية مخصَّص (يتجاوز effect و type)	string	—	—
maxWidth	أقصى عرض	string | number	—	'200px'
themeVars	متغيّرات سمة خاصة بالمكوّن	Record<string, string>	—	—
sx	خصائص تخطيط سريعة (تُطبَّق على المُشغِّل)	SxProps	—	—

Tooltip أحداث

الحدث	الوصف	معامل الاستدعاء	المقابل في Vue
onVisibleChange	تغيُّر الظهور (يُطلَق في الوضعين المتحكَّم وغير المتحكَّم)	(visible: boolean) => void	update:visible

المرجع

forwardRef<HTMLDivElement> —— العنصر الجذري للمُشغِّل. يكشف LhTooltipInstance عن show() / hide() / toggle().

تبسيط التحكم

على خلاف plus، ليس في هذه المكتبة مفتاح manual: تمرير visible وحده يجعله متحكَّمًا به، ويُعلم onVisibleChange الطرف الخارجي. طالع دليل الترحيل.

الطي عند التمرير

عند خروج المُشغِّل من إطار العرض يُطوى التلميح تلقائيًا (onScrollOut)، لتفادي بقاء الطبقة العائمة الثابتة فوق محتوى الصفحة.

الأنماط

import '@lh-ui/react/style/tooltip'