شرح استخدام تلميحات simple CSS tooltip بالتفصيل الممل







السلام عليكم ورحمة الله وبركاته اعضاء وزوار معهد ترايدنت اليوم اقدم لكم شرح استخدام تلميحات simple CSS tooltip بالتفصيل الممل اتمني ان ينال اعجابكم ان شاء الله

اول شي ندخل للموقع https://github.com/arashmanteghi/simptip سوف تجد كود تشغيل التولبار Installation I'll explain with an example:

رمز PHP:
<link rel="stylesheet" type="text/css" href="simptip-mini.css" />  

او

رمز PHP:
<link rel="stylesheet" type="text/css" href="simptip.css" />  

لتحميل الملف من الموقع الرئيسي من هذا الرابط https://github.com/arashmanteghi/sim...ive/master.zip شوف الفرق في الكود وكم تعبت في تعديله سوف تجد في الملف المحمل صفحةdemo html تبين عمل التولبار نرفع ملف simptip.min.css المضغوط او ملف simptip.css العادي داخل المجلد الرئيسي للمنتدى vb او اي مكان انت تحب وعدل كود التشغيل حسب مسار المجلد الي رفعت فيه الملف كود الملف بدون ضغط

رمز PHP:
<link rel="stylesheet" type="text/css" href="simptip.css" />  

كود الملف المضغوط

رمز PHP:
<link rel="stylesheet" type="text/css" href="simptip-mini.css" />  

الان لاضافة تلميح لكلمة معينة نضع الكود التالي

رمز PHP:
<class="simptip-position-bottom simptip-smooth" data-tooltip="العراق"  

الان نضيف التلميح مع ايقونة مكتبة Font Awesome يكون الكود كالتالي

رمز PHP:
<a rel="nofollow" class="simptip-position-bottom simptip-smooth" data-tooltip="كلمة التلميح"  href="http://www..xxxxx.com/"><div class="fa fa-envelope fa-5x"></div></a></li></a>

اضفنا فونت Font Awesome وتلميح ورابط للفونت لتغير اتجاه التلميح للاعلى او اليمين والخ... نعدل الكود التالي class="simptip-position-bottom simptip-smooth نغير كلمة bottom الى للاعلى نضع top لليسار نضع left لليمين right للاسفل bottom لعمل تلميح باللون الازرق مثل الصورة

رمز PHP:
يكون الكود <span class="simptip-position-bottom simptip-info" لاحض اضفنا simptip-info خلف bottom  

لعمل تولبار احمر نعدل الكود بدال كلمة simptip-info نضع كلمة danger لعمل تلميح اخضر نبدل الكلمة انفو بكلمة success لعمل تلميح برتقالي نبدل كلمة بكلمة warning الان نضيف حركة جمالية للكود movable effect كود الحركة هوة simptip-movable لاضافة لون وحركة للكود يكون الكود بالشكل التالي

رمز PHP:
[COLOR="Red"]<span class="simptip-position-bottom simptip-info simptip-movable " data-tooltip="كلمة التلميح"> <class="fa fa-envelope fa-5x"></i></span>[/COLOR

لاحض افضنا كود الحركة خلف كود اللون simptip-info واصبح simptip-info simptip-movable الان شرح الاكواد للتوضيح كود اتجاه التلميح simptip-position-bottom كود لون التلميح simptip-info كود حركة التلميح simptip-movable اصبح التلميح باللون الازرق مع ايقونة فونت مع رابط خلف الايقونة


المصدر