منتدى دعم PBBoard الرسمي
(نسخة قابلة للطباعة من الموضوع)
https://pbboard.info/forums/t19760
أنقر هنا لمشاهدة الموضوع بهيئته الأصلية

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

سوف نشرح باذن الله كيفية اضافة تلميحات او بما يسمى 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 و نرى النتيجة
بالتوفيق
منتدى دعم PBBoard الرسمي

Copyright © 2009-2024 PBBoard® Solutions. All Rights Reserved