طريقة أضافة تلميح على نص معين أو صورة فى المواضيع الأصدار الثاني 2019

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


معاينة أداة التلميحات الجديدة

طريقة تثبيت اداة التلميحات في موقعك

قم بتضمين الكود التالي أعلي الوسم </head> 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/imintweb/imintweb.github.io/demos/Mint-Web-Tooltips/dist/mint-tips.min.css"/>


يمكنك إستخدام التلميح مع أي وسم ،قم فقط بإضافة فئة (class) mint-tips  علي أي نص وستظهر فقاعة التلميح بالخيارات السمة"data-title" ،مثل المثال التالي 

<a class="mint-tips" data-title="هنا يظهر التمليح" href="#url">هنا النص المراد وضع تلميح عليه</a>


تغير الأتجاهات

افتراضيًا ، تظهر التلميحات دائمًا أعلى الكائن. لتغيير الاتجاه ، تتم إضافة السمة data-mint-tips ويتم تحديد الاتجاهات من خلال:

  • الأعلي (الأفتراضي): <a class="mint-tips"></a>
  • الأسفل: <a class="mint-tips" data-mint-tips="bottom"></a>
  • جهة اليسار: <a class="mint-tips" data-mint-tips="left"></a>
  • جهة اليمين: <a class="mint-tips" data-mint-tips="right"></a>

التحريك-Animations

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

  • :إفتراضي<a class="mint-tips"></a>
  • تلاشي: <a class="mint-tips--fade"></a>
  • إنزلاق للداخل: <a class="mint-tips--slide-in"></a>
  • إنزلاق للخارج:<a class="mint-tips--slide-out"></a>
  • إرتداد للداخل <a class="mint-tips--bounce-in"></a>
  • إرتداد للداخل<a class="mint-tips--bounce-out"></a>

الحدود "المحدادات"

لا تعمل الأداة مع التسميات ذاتية الإغلاق ، مثل <img/> أو <input/>. لكن هذه العلامات يمكن أن تكون مقفولة ، ويمكن للحاوية "container" الاستفادة من اداة التسميات كما يلي:<a class=mint-tips"><img/></a>.

 فى النهاية أتمنى ان موضوعنا اليوم قد نال أعجابكم وشكرا
اقرأ أيضًا: