مُولِد أدوات CSS إنشاء أدوات CSS نقية قابلة للتعديل في الموقع والأسهم والألوان والتخطيط.
مُولِد أدوات CSS
إنشاء أدوات CSS نقية قابلة للتعديل في الموقع والأسهم والألوان والتخطيط.
اختر موقع Tooltip
حدد موضع أعلى أو أسفل أو 左 أو يمين للشريحة المصغرة.
اعمل على تصميم الشريحة المصغرة
قم بتعديل الألوان، وحجم الخط، والهامش، ونصف قطر الحدود، وحجم السهم.
انسخ CSS
معاينة الشريحة المصغرة ونسخ كود CSS الكامل بما في ذلك أنماط السهم.
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
مُحول أزرار CSS
صمم أزرار CSS مخصصة مع ألوان، حواف، حدود، ظلال، وأffects عند التمرير.
🎨 CSS & Design
مُحَوِّل بطاقات CSS
ابنِ تصاميم بطاقات玻璃ية مورفولوجية مع تحكم في تلاشي الخلفية والشفافية وظلال.
🎨 CSS & Design
مُولِد حركة CSS
أنشئ animations keyframe في CSS مع تأثيرات مسبقة ووقت قابل للتعديل.
🎨 CSS & Design
مُولِد انتقالات CSS
انشئ انتقالات CSS مع خاصية قابلة للتخصيص، مدة، تخفيف، وتأثيرات عند التحويل.
🎨 CSS & DesignFrequently Asked Questions
Q هل تعمل هذه Tooltips على الهاتف المحمول؟
Q كيف يمكنني إضافة تأخير قبل العرض؟
Q هل يمكنني جعل الشريحة المصغرة ظاهرة عند التمرير؟
Q هل شريحات CSS فقط قابلة للوصول؟
Q كيف يمكنني منع قطع الشريحة المصغرة؟
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.