logo

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

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

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





23-12-2016 06:37 مساءً
معلومات الكاتب ▼
تاريخ الإنضمام : 24-08-2013
رقم العضوية : 4130
المشاركات : 284
الدولة : الجزائر
الجنس :
تاريخ الميلاد : 9-1-1992
الدعوات : 1
قوة السمعة : 2470
موقعي : زيارة موقعي

الأوسمة: 1
الـمصـمـم الـمبـدع
الـمصـمـم الـمبـدع

السلام عليكم

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

المعاينة


Mzg1Mzc4MQ5656Sans-titre MTY2MzIxSans-titre1


اولا

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

attachtooltip.zip

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


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


CODE
 styles/default/css/tooltip.min.css


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

CODE
includes/js/tooltip.min.js



ثانيا

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

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

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

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

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


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



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

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



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


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


ثالثا

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


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


بجانب title=""

اى يصبح


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


مثال

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


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


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

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


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


و نحفظ و نقوم بحذف الكاش المتصفح عن طريق برنامج ccleaner و نرى النتيجة
بالتوفيق
 
 
  tooltip.zip   تحميل zip مرات التحميل :(10)
الحجم :(4.17) KB


look/images/icons/i1.gif شرح اضافة تلميحات Tooltip
  24-12-2016 03:14 صباحاً   [1]
معلومات الكاتب ▼
تاريخ الإنضمام : 23-06-2012
رقم العضوية : 2293
المشاركات : 27
الجنس :
تاريخ الميلاد : 2-1-1994
قوة السمعة : 0
موقعي : زيارة موقعي
شرح رائع اخي
لاطالما اعجبني ستايل منتداك اخي

look/images/icons/i1.gif شرح اضافة تلميحات Tooltip
  24-12-2016 12:24 مساءً   [2]
معلومات الكاتب ▼
تاريخ الإنضمام : 18-07-2009
رقم العضوية : 1
المشاركات : 12526
الدولة : KSA
الجنس :
الدعوات : 52
قوة السمعة : 73776
موقعي : زيارة موقعي
وعليكم السلام ورحمة الله وبركاته

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

وفقك الله

رد جديد موضوع جديد




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









الساعة الآن 05:44 PM