Skip to main content

مُولِد أدوات CSS إنشاء أدوات CSS نقية قابلة للتعديل في الموقع والأسهم والألوان والتخطيط.

مُولِد أدوات CSS illustration
🎨

مُولِد أدوات CSS

إنشاء أدوات CSS نقية قابلة للتعديل في الموقع والأسهم والألوان والتخطيط.

1

اختر موقع Tooltip

حدد موضع أعلى أو أسفل أو 左 أو يمين للشريحة المصغرة.

2

اعمل على تصميم الشريحة المصغرة

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

3

انسخ CSS

معاينة الشريحة المصغرة ونسخ كود CSS الكامل بما في ذلك أنماط السهم.

Loading tool...

What Is مُولِد أدوات CSS?

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

Why Use مُولِد أدوات CSS?

  • حل CSS خالص بدون الحاجة إلى зависимости جافاسكريبت
  • أربعة خيارات للموضع مع أسهم متجهة بشكل صحيح
  • التعديل الكامل للألوان، والحجم، والمسافة
  • يشمل الكود المولد أنماط Wrapper ، والشريحة المصغرة ، والسهم

Common Use Cases

أيقونات Tooltips

إضافة شريحات مصغرة وصفية إلى أزرار الأيقونات فقط لتحسين إمكانية الوصول.

تلميحات حقل الاستمارات

تقديم تلميحات مفيدة ورسائل التحقق على مدخلات الاستمارة.

ملصقات التنقل

عرض الملصقات للمواد المدمجة في التنقل عند التمرير.

تجسيد البيانات

إضافة شريحات مصغرة إلى عناصر الرسم البياني ونقاط البيانات للحصول على سياق إضافي.

Technical Guide

تستخدم أدوات التلميح باستخدام CSS الموضع المطلق داخل غلاف موضّع نسبيًا. يتم تحديد موقع عنصر أداة التلميح باستخدام الأعلى / الأسفل / اليسار / اليمين والتحويل لمركز التساوي. يتم إنشاء السهم باستخدام العنصر الزائفة ::after مع تقنية مثلث حدود CSS - من خلال ضبط الحدود الشفافة على ثلاثة جوانب وحدود ملونة على جانب واحد ، يتم تشكيل شكل المثلث. تظهر / تخفي أداة التلميح باستخدام الفئة الزائفة :hover على الغلاف ، مع التحكم في الرؤية بواسطة العرض أو الرؤية. لأسباب تتعلق بالوصول ، فكّر في إضافة دور = "أداة تلميح" وسمات aria-describedby. خاصية white-space: nowrap تمنع لف النص في أدوات التلميح القصيرة. لمحتويات أطول ، قم بتعيين أقصى عرض وأزل المسافة البيضاء. يمكن إضافة الانتقالات لتحريك العرض / الإخفاء السلس باستخدام اللاشفافية والتحويل.

Tips & Best Practices

  • 1
    أضف تأخيرًا طفيفًا قبل العرض لمنع الأحداث غير المقصودة
  • 2
    استخدم aria-describedby من أجل سهولة الوصول إلى قارئ الشاشة
  • 3
    احتفظ بنص الشريحة المصغرة موجزًا - افضل ما يكون أقل من 150 حرفًا
  • 4
    اختبار موضع الشريحة المصغرة بالقرب من حواف الشاشة لمنع القطع

Related Tools

Frequently Asked Questions

Q هل تعمل هذه Tooltips على الهاتف المحمول؟
تعمل شريحات CSS :hover على الهاتف المحمول باللمس، ولكن يجب考虑 استخدام جافاسكريبت للحصول على تحكم أفضل في التفاعل اللمسي.
Q كيف يمكنني إضافة تأخير قبل العرض؟
أضف transition-delay إلى خصائص ظهور الشريحة المصغرة وความ 투افية للظهور المتأخر.
Q هل يمكنني جعل الشريحة المصغرة ظاهرة عند التمرير؟
نعم، قم بتطبيق الفئة الزائفة :hover على عنصر الشريحة المصغرة نفسه بالإضافة إلى Wrapper.
Q هل شريحات CSS فقط قابلة للوصول؟
لتحقيق سهولة الوصول الكاملة، أضف سمات ARIA. قد لا تكون حلول CSS فقط كافية لقراء الشاشة.
Q كيف يمكنني منع قطع الشريحة المصغرة؟
تأكد من أن Wrapper أو عنصر الأب له overflow: visible واختبار الموضع بالقرب من حواف العرض.

About This Tool

مُولِد أدوات CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.