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

  1. الرئيسية
  2. قسم تطوير منتديات PBBoard
  3. منتدى شروحات ودروس منتديات PBBoard

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



subject icon شرح اضافة تلميحات Tooltip
23-12-2016 06:37 مساءً
صورة Dzkhalwi الشخصية
Dzkhalwi
معلومات الكاتب
السلام عليكم



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



المعاينة



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





اولا



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



شرح اضافة تلميحات Tooltiptooltip.zip



الذي بحتوى على

tooltip.min.css

​tooltip.min.js





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



CODE 
 styles/default/css/tooltip.min.css<br />




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



CODE 
includes/js/tooltip.min.js<br />






ثانيا



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



نقوم بتحرير قالب 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]
بدون صورة شخصية
nour-ht.com
معلومات الكاتب
شرح رائع اخي

لاطالما اعجبني ستايل منتداك اخي

look/images/icons/i1.gif شرح اضافة تلميحات Tooltip
  24-12-2016 12:24 مساءً   [2]
صورة Soliman الشخصية
Soliman
معلومات الكاتب
وعليكم السلام ورحمة الله وبركاته



شرح ولا أروع شرح اضافة تلميحات Tooltip .. جزاك الله كل خير اخي عبد الرحمن على مجهودك الكبير شرح اضافة تلميحات Tooltip



وفقك الله



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


« شرح اضافة صور اعضاء بجانب اسماء في رسائل الصادرة و الواردة | شرح تركيب منتديات PBBOARD على استضافة مجانية »




الساعة الآن 06:32 AM