أداة التلميحات Tipsy

كتب يوم : 1 أغسطس 2014 - تصنيف : تصميم مواقع انترنت - مشاهدات 1

Tipsy هي اضافة jquery لإظهار التلميحات بشكل احترافي ، موضحة في الصورة التالية :

tipsy

tipsy-2

التلميحات هي المربع الذي يظهر عند مرور الماوس على أحد العناصر مثل الروابط أو الصور ويظهر فيها نص توضيحي مثل العنوان أو الوصف

بعد تحميل الإضافة ستجد مجلد اسمه src به ملفين jquery.tipsy.js و tispy.css

قم بإداراجهم في صفحة موقعك من خلال الأكواد التالية بين وسمي head :

 

ومن مميزات أداة Tipsy ما يلي :

1-  يمكنك اختيار مكان ظهور التلميح ( يمين – يسار – أعلى – أسفل )

كود الإستخدام الأساسي لتلميحات tipsy  :

( يمين – يسار – أعلى – أسفل ) كما يمكن دمج مكانين مثل ( أعلى اليمين – أعلى اليسار – أسفل اليمين – أسفل اليسار ) إضافة إلى الإفتراضي ( أسفل الوسط )

استخدم الكود التالي لتحدد مكان ظهور التلميح :

 

tipsy-gravity

وهنا يجب التحدث عن نقطة مميزة ، يمكن أن نجعل ظهور التلميح يعتمد على مكان العنصر من الشاشة … ولنفترض ان لديك رابط قريب من أعلى الصفحة … بالطريقة الحرة سيظهر التلميح أسفل الرابط والعكس ان كان ف الأسفل أو اليمين أو اليسار ، أنظر الصورة التالية :

ولتطبيق الظهور الحر للتلميحات استخدم الكود التالي :

 

2- الظهور والإختفاء التدريجي :

ومن الميزات أيضا أنه بإمكانك إضافة خاصية الظهور والإختفاء التدريجي للتلميح :

كما يمكنك تخصيص مدة الظهور ومدة الإختفاء للتلميح ( سواء كان تدريجيا أو عاديا )  ، إستخدم الكود التالي واقرأ التعليقات بعناية :

 

3- ميزة التحديث الفوري :

Tipsy يتميز بالتحديث الفوري .. فإن كان لديك عنصر يتم تغيير نص التلميح الخاص به لسبب أو آخر أثناء عمل الصفحة ، يقوم Tispy تلقائيا بتحديث أداة التلميح لإظهار النص الجديد

4- الفورم :

يمكن تطبيق تلميحات Tipsy على الفورم أيضاً عند الضغط على عنصر مثل حقل النص أو مربع النص .. .الخ ، الكود التالي :

كود الفورم أولاً

لاحظ أننا استخدمنا  original-title لعناصر الفورم input / textarea / select

كود إظهار التلميحات لعناصر الفورم :

 

5- ملخص خيارات إضافة Tipsy : 

هناك العديد من المزايا الأخرى لإضافة التلميحات Tipsy قمنا بتغطية أهما في الأربع نقاط السابقة ، إليك كود شامل لكل خيارات إضافة Tipsy :

 

ملحوظة : يمكنك تغيير ألوان التمليحات من خلال التعديل على ملف tipsy.css

أتمنى أن تكون الإضافة مفيدة لك .

فضلاً .. إذا أعجبتك التدوينة لا تنسى أن تضغط اعجاب ومشاركة 🙂