Tippy.js - خفيفة الوزن مكتبة الفانيليا جافا سكريبت Tooltip

تلميحات الأدوات مفيدة لعرض أجزاء صغيرة من المحتوى الإضافي. إنها توفر مساحة على الصفحة وتعطيك مساحة لتحريك شيء يجذب انتباه الناس.

في الماضي ، غطينا نصوص تلميح الأدوات ولكن العديد من المطورين يريدون مكتبات مخصصة. البعض يفضل jQuery ، والبعض الآخر يريد الفانيليا البسيطة JS.

البرنامج المساعد Tippy يعمل بشكل أفضل للمجموعة الأخيرة الذين يرغبون في العمل مع رمز الفانيليا JS.

مع Tippy.js تحصل على مكتبة تلميح الأدوات تعمل بكامل طاقتها يعمل على أعلى Popper.js. هذا يعني أن المكوّن الإضافي يأتي مع تبعية صغيرة ، لكنه أسهل بكثير من إدارة مكتبة jQuery.

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

يمكنك إضافة عوامل التلاشي والشرائح والتلويح والمدد المخصصة وطرق معاودة الاتصال وحتى التأثيرات الديناميكية مثل تلميحات الأدوات التلقائية.

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

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

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

يأتي ملف البرنامج النصي Tippy.js الافتراضي مصحوبًا بـ Popper.js حتى لا تحتاج حتى إلى تنزيل هذه المكتبة الإضافية. كل ما تحتاجه هو ملف JS / CSS الافتراضي وصفحة ويب لتشغيل تلميحات الأدوات.

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