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

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

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

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

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

 

 

  • المرجو المزيد من التوضيحات !
    أين سيتم وضع ملفات الإضافة، و أين يجب إضافة الأكواد ؟

    • تم شرح مكان وضع الملفات ..راجع الصورة التالية

    • أضف الكود التالي في فووتر موقعك

      $(‘a’).tipsy();

      هذا الكود يفعل الخاصية لكل الروابط المتاحة في موقعك

  • أخي أين سيتم وضع هذين الملفين : jquery.tipsy.js و tispy.css
    و الأكواد هل تضاف في ملفات القالب ؟
    و شكراً على الموضوع الرائع.

    • مرحباً أخي الكريم
      في مجلدات الجافسكريبت والسي اس اس الخاصة بالقالب
      ومن ثم اضافة الروابط

      لهيدر موقعك مع تغيير مسار الملفات بما يتناسب مع قالب الموقع

      • السلام عليكم أخي الكريم حاب أسألك سؤال إذا ممكن تساعدني في حل هذه المشكلة

        أنا لدي حساب شخصي قديم بأمكانك أن تدخل على بروفايلي الحالي وتذهب للمتابعيين والي عددهم 20 متابع وستجد أسم ( ALaa BereT ) في آخر الأسماء وهذا هو حسابي الأصلي القديم ولدي رغبة شديدة بإسترجاعه ولكن المشكلة أني حافظ أسم الأميل والرقم السري على فيسبوك ولكن عندما أكتبه يأتي لي حساب مصفر جديد (ولا أعرف أين ذهب هذا الحساب الأصلي) رغم أن حسابي موجود بكل ما فيه من تعليقات وإعجابات وكل شيْ عندما تدخل على هذا الأسم الي كتبته لك بين الأقواس فشو المشكلة هنا ولماذا هذا الحساب ذهب ولك جزيل الشكر إذا كنت بتعرف بهذه الأمور أو ممكن تفيدني بهذا الشيْ بكيفية إسترجاعه فهذا الحساب أنا بحاجة جداً له…