MeDo

منشئ التلميحات بالذكاء الاصطناعي.

صِف التلميح الذي تحتاجه ويُنشئ MeDo السلوك بالكامل — تأخير الفتح والإغلاق، والانقلاب بعيداً عن حدود نافذة العرض، وسهم يبقى موجهاً نحو العنصر المُشغِّل، والتشغيل عبر تركيز لوحة المفاتيح، وربط aria-describedby.

تلميح الأدوات
تلميح الأدوات

التلميح هو المكوّن الوحيد الذي لن يراه ثلث مستخدميك أبداً

المرور بالمؤشر غير موجود على الشاشة اللمسية. لا توجد إيماءة على الهاتف تعني بشكل موثوق "أظهر لي الوصف دون تنشيط هذا العنصر"، ما يعني أن كل تلميح غير مرئي لحصة كبيرة من زياراتك. هذه الحقيقة وحدها تحسم معظم الجدل حول تصميم التلميحات قبل أن يبدأ: لا يمكن للتلميح أن يحمل سوى معلومات لا يحتاجها المستخدم. متطلبات الحقول ورسائل الخطأ وتحفظات الأسعار ومعنى الزر ذي الأيقونة فقط، كلها يجب أن تكون في مكان مرئي أو في اسم مُتاح للوصول. تعامل مع التلميح كتحسين فوق واجهة تعمل بالفعل بدونه، وستُجيب أسئلة إمكانية الوصول عن نفسها في معظمها.

6 قالبًا

قوالب تلميح الأدوات التي يمكنك توليدها

كل قالب هو طلب حقيقي لا صورة. انسخه إلى أي محرّر ذكاء اصطناعي، أو شغّله في MeDo لتحصل على كود React و Tailwind مباشرة.

BasicLabel Hint

Dark Panel Hint on Hover and Focus

The default tooltip: one line of plain text, dark panel, arrow, delays in both directions. Reach for it when a control is already named and you only want to add a detail a mouse user might appreciate.

Create a tooltip component that wraps a single trigger child and renders a short plain-text hint on pointer enter and on focus-visible. Use a dark slate panel with 13px white text, 6px vertical and 10px horizontal padding, a 6px radius, a 240px max width and an 8px offset from the trigger, plus a 6px arrow aimed at the trigger. Open after a 300ms delay and close after 100ms so the pointer can cross the gap without the panel vanishing. Dismiss on Escape, on blur and on scroll. Give the panel role="tooltip" and link it to the trigger with aria-describedby only while it is open, rather than leaving hidden markup in the tree. Fade and translate 4px on entry, and drop the transition entirely under prefers-reduced-motion.

جرّبه في MeDo
Icon-onlyIcon Button

Tooltip as the Only Label a Control Has

When the icon is the whole button, the tooltip text is the accessible name — not a description. Getting that distinction wrong is why so many toolbars announce the same word twice.

Create a tooltip for an icon-only button where the tooltip text is the only name the control has. Put that string in aria-label on the button and do not also set aria-describedby, so the same words are not announced twice. The visible panel exists for sighted pointer users: dark surface, 12px text, a single line that does not wrap under 200px. Open on hover after a 400ms delay but open immediately on focus-visible, since a keyboard user has already committed to the control. Close on Escape, on blur and on pointer leave. Keep the button hit area at least 44px even when the glyph is 20px, and skip rendering the panel entirely when a coarse pointer is detected.

جرّبه في MeDo
CollisionAuto Flip

Edge-Aware Placement With a Tracking Arrow

Handles the case a fixed side always breaks: a trigger near the top of a scroll container or the right edge of the viewport. The arrow has to re-anchor after the flip or it points at nothing.

Create a tooltip with collision-aware placement: a preferred side prop of top, bottom, left or right, an explicit fallback order, and shifting along the cross axis when the panel would overflow the viewport or the nearest scrolling ancestor. Add a 6px arrow that re-anchors to the trigger centre after any flip or shift, clamped so it never slides past the panel corner radius. Recompute position on scroll and resize behind a requestAnimationFrame throttle, and close rather than reposition once the trigger leaves the visible area. Keep the aria-describedby relationship stable across repositioning so the description is not re-announced. Use role="tooltip" and plain text content with no interactive children.

جرّبه في MeDo
ToolbarGroup Skip

Shared Delay Across a Button Row

One provider, one timer. Once the first tooltip in a toolbar has opened, moving along the row should switch content instantly instead of making the user wait 300ms per button.

Create a tooltip provider that shares open state across a group of triggers in a toolbar. The first tooltip in the group waits the full 300ms open delay; while any tooltip in the group is open, moving to a sibling trigger swaps the content with no delay and no exit animation, so the panel appears to slide along the row. Leaving the group entirely closes after a 150ms grace period. Reuse a single positioned panel element rather than mounting one per trigger, and update its aria-describedby target as the active trigger changes. Escape closes the group and returns focus behaviour to normal. Under prefers-reduced-motion, replace the slide with an instant content swap.

جرّبه في MeDo
Multi-lineRich Hint

Two-Line Tooltip With a Keyboard Shortcut

A label line plus a monospace shortcut hint on the right. Still passive, still text-only — the moment you want a link in here, you want a popover instead.

Create a tooltip that renders a label line plus a secondary line, with an optional keyboard shortcut rendered as a small monospace chip aligned to the right of the label. Cap the panel at 260px, allow the description to wrap to two lines, and keep line-height at 1.4 so the two lines read as one block. Content stays non-interactive: no links, no buttons, no selectable code — if the user needs to click inside, use a popover. Announce the whole panel as one description via aria-describedby so the shortcut is read as part of the sentence rather than as a separate node. Open after 300ms, close after 100ms, dismiss on Escape and blur.

جرّبه في MeDo
OverflowTruncation

Tooltip Only When the Text Is Clipped

Table cells and file names truncate with an ellipsis; a tooltip that repeats already-visible text is noise. Measure the element and only attach the tooltip when scrollWidth exceeds clientWidth.

Create a conditional tooltip for truncated text: compare scrollWidth against clientWidth on the target element and only register hover and focus handlers when the text is actually clipped, so a fully visible cell never shows a tooltip repeating itself. Re-measure on resize and whenever the text content changes, using a ResizeObserver rather than a window listener. When active, show the full string in a dark panel capped at 320px with wrapping enabled, positioned below the cell to avoid covering the row header. Make the truncated element focusable with tabindex="0" only while the tooltip is registered, so keyboard users can reach it without collecting empty tab stops across the whole table.

جرّبه في MeDo

كيف تخصّص تلميح الأدوات الخاص بك

حدّد تأخير الفتح والإغلاق كل على حدة

التأخير المشترك الواحد خاطئ في الاتجاهين. نحو 300ms قبل الفتح يمنع وميض التلميحات أثناء عبور المؤشر لشريط الأدوات، بينما تأخير إغلاق قصير بـ100ms يتيح للمؤشر الانتقال من العنصر المُشغِّل إلى التلميح دون أن تختفي اللوحة في منتصف الحركة.

اطلب كشف التصادم، لا جانباً ثابتاً

التلميح المثبَّت في الأعلى سيُقتطع عند أعلى نافذة العرض أو عند حدّ حاوية التمرير. حدّد جانباً مُفضَّلاً مع بدائل ليقوم المكوّن بالانقلاب والانزلاق من تلقاء نفسه، وانصّ على أن يبقى السهم موجهاً نحو العنصر المُشغِّل بعد الحركة.

اشترط أن يُشغّله التركيز، لا المرور بالمؤشر فحسب

إذا استجاب التلميح للفأرة فقط، فلن يحصل مستخدمو لوحة المفاتيح على شيء. اطلب أن يُفتح عند focus-visible وأن يُغلق عند Escape وblur، وهو أيضاً ما يجعله قابلاً للاستخدام لمن يتنقل بجهاز مفاتيح مساعد أو بقارئ شاشة.

أبقِ المحتوى سلبياً ونصياً فقط

في اللحظة التي يحتوي فيها التلميح على رابط أو زر أو نص قابل للنسخ، يصبح بحاجة إلى وسيلة للوصول إليه وإبقائه مفتوحاً، ويتوقف عن كونه تلميحاً. انصّ على أن المحتوى نص عادي غير تفاعلي، واستخدم popover عندما تحتاج شيئاً قابلاً للنقر بالداخل.

من يستخدم مكوّن تلميح الأدوات

لوحة تحكم أو أداة إدارة

أزرار شريط أدوات بأيقونات فقط تحمل اسماً حقيقياً مُتاحاً للوصول، مع تلميح يعيد التسمية لمستخدمي الفأرة المُبصرين، ويُتجاوز تأخير الفتح عندما ينتقل المؤشر بين أزرار متجاورة.

منتج SaaS

تلميح على مفتاح مخطط بياني يشرح كيفية حساب مقياس معيّن، ينقلب إلى أسفل العنصر المُشغِّل قرب أعلى اللوحة ويُغلق عند التمرير حتى لا يطفو منفصلاً عن النقطة التي يصفها.

متجر تجارة إلكترونية

اختصارات جدول المقاسات وأيقونات شارات الشحن تُوضَّح عند المرور بالمؤشر، مع تكرار المعلومة نفسها في نص صفحة المنتج المرئي لأن المتسوقين من الهاتف لن يُشغّلوا المرور بالمؤشر أبداً.

توثيق المطورين

رموز الكود المضمَّنة والاختصارات تكشف عن توقيع نوع من سطر واحد عند المرور أو التركيز، بحد أقصى ضيق للعرض حتى لا تغطي اللوحة أبداً نموذج الكود الذي تشرحه.

أنماط تلميح الأدوات لمواقع مختلفة

المكوّن تلميح الأدوات نفسه، مُهيّأ لنوع الموقع الذي يُنشر عليه.

01 / 06

Dashboard and Admin Tools

Dense toolbars are where tooltips earn their keep and where a per-trigger delay is most annoying. Use one shared provider so moving along a row of icon buttons swaps the label instantly. The tooltip still cannot be the only place the label exists — every icon button needs a real accessible name regardless.

أنماط تلميح الأدوات وتنويعاته

اختر التنويعة التي تناسب بقية الصفحة، ثم ولّدها.

01 / 06

Dark Panel Tooltip

A dark slate surface with white text is the default for a reason: it reads as an overlay rather than as page content, so users do not mistake it for a permanent part of the layout. Keep the panel opaque — a translucent tooltip over a chart becomes unreadable exactly where it is needed.

تلميح الأدوات في React و Next.js و Vue و Svelte

React و Next.js و Vue 3 و SvelteKit و Astro أو HTML صِرف — المكوّن تلميح الأدوات نفسه بست طرق للإضافة.

01 / 06

React Tooltip

Positioning needs real DOM measurement, so this is a client component with refs on both trigger and panel. Portal the panel to document.body — a tooltip inside a container with overflow: hidden will be clipped no matter how correct the coordinates are.

src/components/Tooltip.tsx

export function Tooltip({ label, children }) {
  const [open, setOpen] = useState(false)
  const id = useId()

  return (
    <span
      onPointerEnter={() => setOpen(true)}
      onPointerLeave={() => setOpen(false)}
    >
      {cloneElement(children, { 'aria-describedby': open ? id : undefined })}
      {open && createPortal(<Panel id={id}>{label}</Panel>, document.body)}
    </span>
  )
}

كيف تضيف تلميح الأدوات إلى مشروعك

أربع خطوات، من اختيار قالب تلميح الأدوات إلى إطلاقه في الإنتاج.

01~30s

Pick a Tooltip Pattern

Choose by what the trigger already tells the user: a label hint for a named control, the icon-only variant when the tooltip text is the accessible name, or the truncation variant for table cells.

02~10s

Copy the Prompt

Take it into MeDo, Lovable, Bolt, v0 or Cursor, and set the open and close delays before you run it. Those two numbers are what separates a helpful hint from a panel that flickers across a toolbar.

03~1min

Generate and Refine

You get React + Tailwind back with a live preview. Follow up in plain English — "flip below near the top edge", "open instantly on focus", "skip the delay between toolbar buttons" — rather than editing coordinate math by hand.

04~2min

Wire the Triggers and Test the Keyboard

Portal the panel out of any overflow-hidden ancestor, then tab to each trigger and press Escape. If the hint only appears on hover, or Escape does not close it, the component is not shippable yet.

أسئلة شائعة حول تلميح الأدوات

كيف أُنشئ مكوّن تلميح بالذكاء الاصطناعي؟

صِف العنصر المُشغِّل والموضع والتوقيت في موجه واحد — مثلاً "تلميح داكن فوق العنصر المُشغِّل، تأخير فتح 300ms، ينقلب عند ملامسة حدّ نافذة العرض، ويُفتح عند التركيز أيضاً". يُنشئ MeDo منطق تحديد الموضع والسهم والتأخيرات وربط aria-describedby معاً، فيكون السلوك كاملاً وليس مجرد div بموضع absolute مع تنسيقات.

ما الفرق بين التلميح وpopover؟

التلميح سلبي: يعرض وصفاً نصياً قصيراً للعنصر الذي تشير إليه، ويُغلق بمجرد أن تبتعد، ولا يحتوي شيئاً قابلاً للنقر. أما popover فتفاعلي: يُفتح بالنقر، ويبقى مفتوحاً، ويحتوي روابط أو أزراراً أو حقول نماذج، ويحصر التركيز أو يديره. إذا وجدت نفسك تريد زراً داخل تلميح، فأنت تريد popover.

هل يجب أن يستخدم التلميح aria-describedby أم aria-label؟

استخدم aria-describedby عندما يكون للعنصر المُشغِّل اسم مرئي أو مُتاح للوصول أصلاً ويضيف التلميح تفصيلاً تكميلياً، لأن الوصف يُعلن بعد الاسم. استخدم aria-label عندما يكون نص التلميح هو الاسم الوحيد للعنصر، كما في زر بأيقونة فقط، واستغنِ عن aria-describedby في تلك الحالة حتى لا يُعلن النص نفسه مرتين.

هل يمكن للتلميحات أن تعمل على الأجهزة اللمسية؟

ليس بشكل موثوق. الشاشات اللمسية لا تمتلك حالة مرور بالمؤشر، والضغط الطويل محجوز أصلاً لتحديد النص وقوائم السياق، لذا فإن أي نمط "تلميح عند اللمس" يصطدم بالمنصة. افترض أن مستخدمي الهاتف والجهاز اللوحي لن يروه أبداً، واحتفظ بكل ما هو ضروري في نص مرئي أو في اسم مُتاح للوصول.

كم يجب أن يكون التأخير قبل فتح التلميح؟

من 200 إلى 500ms تقريباً يعمل جيداً، مع 300ms كقيمة افتراضية آمنة. التأخير موجود حتى لا تخفق التلميحات أثناء عبور المؤشر لصف من عناصر التحكم في طريقه إلى مكان آخر. اقرنه بتأخير إغلاق أقصر بكثير، نحو 100ms، حتى لا تختفي اللوحة أثناء تحرك المؤشر نحوها.

هل يجب أن يكون التلميح قابلاً للإغلاق بلوحة المفاتيح؟

نعم. تشترط WCAG أن يكون المحتوى الظاهر عند المرور أو التركيز قابلاً للإغلاق دون تحريك المؤشر أو التركيز، ما يعني عملياً أن Escape يُغلقه. كما يجب أن يبقى مرئياً وقتاً كافياً للقراءة وأن يبقى قابلاً للمرور عليه بالمؤشر. اذكر دعم لوحة المفاتيح في موجهك وسيربط MeDo سلوك Escape وblur وجسر المرور بالمؤشر.

بناء تلميح الأدوات الخاص بك الآن.

جرّب أي أمر — مجاني وبدون تسجيل.

ابدأ البناء مجاناًعرض الأسعار
زر

زر

صِف علامتك التجارية ويُنشئ MeDo نظام الأزرار بالكامل — أنماط رئيسية وثانوية وشفافة وتدميرية، وثلاثة أحجام، إضافة إلى حالات التمرير والتركيز والتحميل والتعطيل. موجه واحد، مجموعة واحدة متسقة.

مكونات ذات صلة
الشارة

الشارة

صِف حالاتك ويُنشئ MeDo مجموعة الشارات بالكامل — أقراص حالة دلالية، ووسوم قابلة للإزالة، وعدّادات رقمية مع اختصار 99+، ونقاط مؤشرة تستقر على الصورة الرمزية دون أن تُقتطع.

مكونات ذات صلة
قائمة منسدلة

قائمة منسدلة

صِف عناصرك ويُنشئ MeDo القائمة كاملة — الزرّ المُشغِّل، اللوحة، أقسام مجمّعة بفواصل، قوائم فرعية، تنقّل بالأسهم والكتابة السريعة، إغلاق بـ Escape وبالنقر خارجها، وتركيز يعود إلى الزرّ المُشغِّل عند الإغلاق.

مكونات ذات صلة