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





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

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



23-12-2016 06:37 مساء
Dzkhalwi
عضـو نشيط
rating
الأوسمة:1
الـمصـمـم الـمبـدع
الـمصـمـم الـمبـدع
معلومات الكاتب ▼
تاريخ الإنضمام : 24-08-2013
رقم العضوية : 4130
المشاركات : 284
الدولة : الجزائر
الجنس : ذكر
تاريخ الميلاد : 9-1-1992
الدعوات : 1
قوة السمعة : 2470
موقعي : زيارة موقعي
عدد الإجابات: 1
PBBoard Version : 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 مرات التحميل :(9)
الحجم :(4.17) KB


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

24-12-2016 12:24 مساء
مشاهدة مشاركة منفردة [2]
Soliman
PBB Management
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 18-07-2009
رقم العضوية : 1
المشاركات : 11529
الدولة : السعودية
الجنس : ذكر
تاريخ الميلاد : 6-1-1980
الدعوات : 51
قوة السمعة : 68676
موقعي : زيارة موقعي
عدد الإجابات: 253
PBBoard Version : 3.0.3
 offline 
look/images/icons/i1.gif شرح اضافة تلميحات Tooltip
وعليكم السلام ورحمة الله وبركاته

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

وفقك الله
توقيع :Soliman
تذكر : لكي تتم مساعدتك في استفساراتك وطلباتك يجب عليك الالتزام بتطبيق قوانين الدعم الفني





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


 







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