Skip to content

Tooltip (تلميح) ​

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

vue
<template>
  <lh-tooltip content="هذا نص التلميح">
    <lh-button>انقر لعرض التلميح</lh-button>
  </lh-tooltip>
</template>

لا توجد دلالة hover في البرنامج المصغر

القيمة الافتراضية لـ trigger هي click (متاحة على كل المنصات). أما hover ففعّال في H5 فقط — استخدم trigger="click" على طرف البرنامج المصغر، ليُطلَق ويُغلَق عبر النقر / اللمس.

الموضع والعرض ​

vue
<template>
  <lh-tooltip content="تلميح سفلي" placement="bottom">
    <lh-button>bottom</lh-button>
  </lh-tooltip>

  <lh-tooltip content="النص الطويل يلتف تلقائيًا" :max-width="200" placement="top">
    <lh-button>تقييد العرض</lh-button>
  </lh-tooltip>
</template>

Props ​

الخاصيةالوصفالنوعالافتراضي
contentنص التلميحstring—
placementموضع الطبقة المنبثقة (12 موضعًا)LhTooltipPlacementCore'top'
triggerطريقة الإطلاق: click (كل المنصات) / hover (H5 فقط)'click' | 'hover''click'
showDelayتأخير الإظهار (بالملي ثانية)number—
hideDelayتأخير الإخفاء (بالملي ثانية)number—
maxWidthأقصى عرض (يلتف المحتوى تلقائيًا)string | number—
disabledمعطّلbooleanfalse
customClassصنف مخصّصstring—
themeVarsمتغيّرات سمة خاصة بالمكوّنRecord<string, string>—
sxخصائص تخطيط سريعةLhSxProps—

Events ​

الحدثالوصفمعامل الاستدعاء
update:modelValueتغيّر الظهور (الاستخدام المتحكَّم)(visible: boolean)
showالإظهار—
hideالإخفاء—

الفروق عن نسخة Vue3

  • تركيب الطبقة المنبثقة عبر root-portal + القياس غير المتزامن بإطارين (عرض شفاف أولًا لقياس الأبعاد ← التموضع ← العرض، لمنع الوميض).
  • يحتفظ طرف MP بالسلوك الفوري لـ showDelay / hideDelay في وضع click فقط.
  • حساب التموضع غير متزامن (getLhRect يُرجع Promise)، فلا تفترض الحصول على النتيجة بشكل متزامن.