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، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

أداة إزالة التشفير في لغة جافا سكريبت (JavaScript Deobfuscator)

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

مولد تراخيص

قم بإنشاء النص الكامل لترخيصات المصدر المفتوح مع إدخال اسمك والسنة المقابلة، ويشمل ذلك تراخيص MIT وApache 2.0 وGPLv3 وBSD-3 وMPL-2.0 وCC.

مولّد إعدادات Nginx

أنشئ كتل server في Nginx مع TLS وHTTP/2 وgzip والتخزين المؤقت في المتصفح وقواعد الوكيل العكسي، انطلاقًا من نموذج بسيط.

مولد ملف tsconfig.json

أنشئ ملف tsconfig.json نظيفا باختيار target وmodule وmoduleResolution وJSX وأعلام الصرامة الشائعة، ثم انسخ الإعداد المولّد إلى مشروعك.

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