شرح اضافة تلميحات Tooltip

السلام عليكم سوف نشرح باذن الله كيفية اضافة تلميحات او بما يسمى tooltip المعاينة اولا نقوم برفع هذا الملف too ..




23-12-2016 06:37 مساء
Dzkhalwi
عضو فعال
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 24-08-2013
رقم العضوية : 4130
المشاركات : 242
الدولة : الجزائر
الجنس : ذكر
تاريخ الميلاد : 9-1-1992
الدعوات : 1
يتابعهم : 2
يتابعونه : 21
قوة السمعة : 2160
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.0
 offline 
السلام عليكم

سوف نشرح باذن الله كيفية اضافة تلميحات او بما يسمى tooltip 

المعاينة


Mzg1Mzc4MQ5656Sans-titre MTY2MzIxSans-titre1


اولا 

نقوم برفع هذا الملف

attachtooltip.zip

الذي بحتوى على 
tooltip.min.css
​tooltip.min.js


نقوم برفع الملف tooltip.min.css الى المسار التالي


 styles/default/css/tooltip.min.css


نقوم برفع الملف tooltip.min.js الى المسار التالي

includes/js/tooltip.min.js



ثانيا 

نقوم باستدعاء الملفات

نقوم بتحرير قالب  headinclud

لوحة تحكم الإدارة القوالب » default-style » تحرير : headinclud

ثم نضيف اوامر استدعاء

نضيف سطر التالي بجانب اسطر css


<link rel="stylesheet" href="{$ForumAdress}styles/default/css/tooltip.min.css" />


نضيف سطر التالي بجانب اسطر js

<script type="text/javascript" src="{$ForumAdress}includes/js/tooltip.min.js"></script>


و في الاخير نضيف سطر التالي لتفعيل tooltip
يجب ان يكون قبل </head>


<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
</script>


ثالثا

الان نقوم باضافة كودة التالي  في جميع القوالب التي تحتوي على title=""


data-toggle="tooltip" data-placement="auto"


بجانب title=""

اى يصبح


data-toggle="tooltip" data-placement="auto" title=""


مثال 

لدينا هذا سطر خاص يعدد المواضيع المتواجد في عنواوين المنتديات


<span class="subject_num subject_num_icon pkr-b" title="{$lang['subject_num']}">


كما قلنا سابقا نضيف السطر السابق بجانب titlr=""

فتصبح النتيجة


<span class="subject_num subject_num_icon pkr-b" data-toggle="tooltip" data-placement="auto" title="{$lang['subject_num']}">


و نحفظ و نقوم بحذف الكاش المتصفح عن طريق برنامج ccleaner و نرى النتيجة
بالتوفيق





 
 
 
  tooltip.zip   تحميل zip مرات التحميل :(4)
الحجم :(4.17) KB


24-12-2016 03:14 صباحا
مشاهدة مشاركة منفردة [1]
nour-ht.com
عضـو مشارك
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 23-06-2012
رقم العضوية : 2293
المشاركات : 17
الجنس : ذكر
تاريخ الميلاد : 2-1-1989
يتابعهم : 4
يتابعونه : 1
قوة السمعة : 0
اصدار المنتدى : 3.0.0
 offline 
look/images/icons/i1.gif شرح اضافة تلميحات Tooltip
شرح رائع اخي 
لاطالما اعجبني ستايل منتداك اخي 
 

24-12-2016 12:24 مساء
مشاهدة مشاركة منفردة [2]
Soliman
PBB Management
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 18-07-2009
رقم العضوية : 1
المشاركات : 10875
الدولة : السعودية
الجنس : ذكر
تاريخ الميلاد : 6-1-1980
الدعوات : 46
يتابعهم : 11
يتابعونه : 94
قوة السمعة : 64436
موقعي : زيارة موقعي
عدد الإجابات: 63
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif شرح اضافة تلميحات Tooltip
وعليكم السلام ورحمة الله وبركاته

شرح ولا أروع 2flw5 .. جزاك الله كل خير اخي عبد الرحمن على مجهودك الكبير 2flw5

وفقك الله



الكلمات الدلالية
Tooltip ، اضافة ، تلميحات ،







الساعة الآن 06:43 صباحا