Softonic

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

خطوة 1 / 2
التالي

غالبًا ما تكون تلميحات الأدوات هي أول مكان يصل إليه المشروع لمكتبة JavaScript، لكن العنصر الزائف ::after العادي الذي يتم تشغيله بواسطة سمة data-tooltip يغطي 90% من الحالات الحقيقية. يقوم هذا المولد بإخراج قواعد .tooltip و.tooltip::after الدقيقة التي تحتاجها - اختر الموضع العلوي أو السفلي أو الأيسر أو الأيمن، واضبط لون الخلفية والنص، وانسخ الكتلة إلى ورقة الأنماط الخاصة بك.

كيفية توصيل تلميح الأدوات إلى HTML الخاص بك

  1. 1

    اختر الموضع

    أعلى أو أسفل أو يسارًا أو يمينًا. يستخدم المولد `calc(100% + 8px)` بالإضافة إلى التحويل الصحيح بحيث تجلس الفقاعة على الزناد.

  2. 2

    اختيار الألوان

    تعمل الخلفية على تحريك الفقاعة، ويتم تطبيق لون النص على تسمية تلميح الأداة. حافظ على التباين عند 4.5:1 أو أفضل لسهولة القراءة.

  3. 3

    انسخ ملف CSS

    الصق الكتلة التي تم إنشاؤها في ورقة الأنماط الخاصة بك. فهو يوفر `.tooltip` و`.tooltip::after` وقاعدة `:hover`.

  4. 4

    وضع علامة على الزناد

    أضف `class="tooltip" data-tooltip="النص الخاص بك"` إلى أي عنصر. يقرأ `::after` السمة عبر `content: attr(data-tooltip)`.

تلميحات أدوات CSS خالصة: ما تكسبه وما تتخلى عنه

يعد تلميح أدوات CSS فقط صغيرًا وسريعًا ويستمر مع تعطيل JavaScript. ومع ذلك، فهو يعيش داخل الترتيب المصدر لـ DOM وبالتالي يرث بعض القيود التي تحتاج إلى تصميمها.

ما يفعله CSS الذي تم إنشاؤه

  • يضبط المشغل على position: relative بحيث يتم تثبيت تلميح الأداة المطلق عليه.
  • يسحب الملصق من content: attr(data-tooltip)، مما يعني عدم تكرار النص مطلقًا.
  • يقوم بتحريك العتامة باستخدام transition: opacity 0.15s، بحيث يبدو المظهر سريعًا ولكن ليس مفاجئًا.
  • يستخدم pointer-events: none على الفقاعة بحيث لا يمنع النقرات على الزناد أبدًا.

حساب تحديد الموضع

الموقف قاعدة الأوفست
أعلى bottom: calc(100% + 8px); left: 50%; translateX(-50%)
أسفل top: calc(100% + 8px); left: 50%; translateX(-50%)
اليسار right: calc(100% + 8px); top: 50%; translateY(-50%)
اليمين left: calc(100% + 8px); top: 50%; translateY(-50%)

تحذيرات إمكانية الوصول

  • لا تتم قراءة data-tooltip بواسطة قارئات الشاشة. إذا كانت المعلومات ضرورية، قم بإقرانها بـ aria-label أو النص المرئي.
  • يحتاج مستخدمو لوحة المفاتيح إلى :focus-visible بالإضافة إلى :hover. قم بتوسيع القاعدة التي تم إنشاؤها إلى .tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }.
  • ستختفي تلميحات الأدوات التي تم قصها بواسطة overflow: hidden على أحد السلف. انقل المشغل خارج حاوية القطع أو قم بالتبديل إلى النافذة المنبثقة التي يتم عرضها بواسطة JS للحصول على واجهات مستخدم كثيفة.

الأسئلة الشائعة

يحافظ العنصر الزائف على DOM نظيفًا، ويتجنب تكرار نص التسمية، ويتيح لك تصميم تلميح الأداة دون القلق بشأن مطابقة العناصر الأخرى عن طريق الخطأ. والتكلفة هي أنه لا يمكن فهرسة محتوى ::after بواسطة التقنية المساعدة، لذا قم بتعزيز النص المهم باستخدام aria-label.

نعم - أضف عنصرًا زائفًا ثانيًا، على سبيل المثال .tooltip::before، على شكل مربع بعرض/ارتفاع صفري وحدود ملونة. إنها خدعة مثلثة كلاسيكية في CSS؛ ينتج مولد CSS Triangle Generator الشقيق في هذه المجموعة إعلانات الحدود الدقيقة التي تحتاجها.

قم بإضافة transition-delay: 0.3s إلى قاعدة ::after ولكن قم بإعادة تعيينها إلى الصفر عند التمرير للخارج، أو استخدم transition: opacity 0.15s 0.3s; لتأخير الظهور دون تأخير الطرد.

تُرسَل الموضع والألوان التي تختارها إلى خادمنا لإنشاء CSS، لكنها لا تُخزَّن ولا يُعاد استخدامها. في الصفحة متعددة الخطوات تنتقل في الرابط بين الخطوات؛ أما في العرض أحادي الصفحة فلا يُحتفظ بأي شيء.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

منسق JSON

الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.

مولد لوحة الألوان

أنشئ لوحات ألوان أحادية أو متجاورة أو مكملة أو ثلاثية أو رباعية من لون HEX أساسي، ثم صدّر متغيرات CSS جاهزة للنسخ.

الأداة متاحة بلغات أخرى