إنشاء تلميحات الأدوات المصغرة في المغلق النقي مع وينك

بهذا الاسم الغريب ، لن تتوقع الكثير منه وينك, حر مكتبة CSS tooltip. ومع ذلك واحدة من أصغر المكتبات يمكنك الحصول على قياس أقل من 1 كيلو بايت عند gzipped.

يستخدم وينك المغلق النقي مع البيانات-* سمات لنصنع او لنبتكر تلميحات الأدوات الحية أنه يمكنك تصفيف وموقف ترضيك. أفضل ما في الأمر ، إنها مكتبة مجانية تمامًا مع شفرة المصدر متاحة على جيثب.

تلميحات الأدوات خفيفة الوزن هذه بسيطة للغاية لإضافتها إلى موقع الويب الخاص بك. تحتاج فقط إلى Wenk.css ملف إضافة إلى رأس الصفحة الخاصة بك, والتي يمكنك تنزيلها من GitHub repo.

أو ، يمكنك حتى أضف ملف CDN التي يتم استضافتها على CDN جيثب. إليك رمز ذلك:

أو ، إذا كنت من محبي npm / bower ، فيمكنك تثبيت هذه الحزمة من المحطة.

لا تحتوي علامات تلميح الأدوات الافتراضية على الكثير من البيانات المخصصة. سمحوا لك حدد الموقف والعرض, لكن لا بد عليك تغيير يدويا المغلق إذا كنت تريد لهم نصب بطريقة مختلفة.

على سبيل المثال ، قد ترغب في إضافة سهم CSS إلى تلميح الأدوات الذي يظهر أعلى عنصر تلميح الأدوات. هذا أمر بسيط إلى حد ما ولكن ستحتاج إلى البحث عن ورقة أنماط Wenk العثور على فئة CSS بالضبط لتوسيع.

وهنا عينة من بعض رمز افتراضي للحصول على تلميحات الأدوات Wenk:

   وينك إلى اليمين!  

تتضمن صفحة الهبوط الرئيسية في ونك العروض الحية التي يمكنك اختبار عن طريق تحوم. هؤلاء هم تلميحات الأدوات الأساسية ستحصل لكنها مثالية لمكتبة تزن أقل من كيلوبايت.

شيء واحد رئيسي هو أن تنظر دعم المتصفح. جميع إصدارات Chrome و Firefox يجب أن تعمل بشكل جيد. نفس الشيء مع Opera 12+ و Opera Mini v8 +. ولكن يبدو IE8 و IE10 لديك مشكلة تقديم هذه تلميحات الأدوات. والحمد لله ، حصتها في السوق آخذة في الانخفاض بسرعة ولكن هذا شيء يجب مراعاته قبل استخدام.

ما زلت مندهشًا من مقدار ما يمكنك فعله باستخدام عدد قليل من وحدات KBs. مكتبة Wenk هي شهادة على تطور الواجهة الأمامية الحديثة ، وهي تُظهر أن القليل يمكن أن يقطع شوطًا طويلًا.

يمكنك حفر من خلال مصدر كامل على جيثب ، جنبا إلى جنب مع العروض الحية و مقتطفات الشفرة لإعداد وإنشاء تلميحات الأدوات هذه لموقعك الخاص.