آموزش ساخت tooltip

آموزش ساخت tooltip

اشتـــراک گـــذاری مطلب

آموزش ساخت tooltip

با سلام میلاد علیزاده وکیلی هستم از آکادمی وردپرس پوش در خدمت شما هستم با آموزش ساخت tooltip
شاید در برخی از وبسایت ها دیده باشید که زمانی که روی تگ a یا li هاور می کنید یه باکسی مثله باکس موجود در تصویر زیر، برای توضیحات بیشتر، نمایش داده می شود.

در اصطلاح به این حالت tooltip (تولتیپ) گفته می شود. در این آموزش یاد میگیریم به چه شکلی این حالت را در وبسایت خود ایجاد کنیم

برای این کار لازم هستش که کتابخانه های css و js کتابخانه ی بوت استرپ را در فایل های قالب خود include کنید (قرار دهید)

اگر قالب شما از کتابخانه ی بوت استرپ پشتیبانی می کند، کار خاصی نیاز نیست انجام دهید ولی اگر قالب شما از بوت استرپ پشتیبانی نمی کند طبق آموزش زیر بوت استرپ را به فایل های قالب خود اضافه کنید.

  • ابتدا کتابخانه ی بوت استرپ را از این لینک دانلود کنید.
  • وارد هاست خود شده سپس به مسیر public_html/wp-content/themes/themename بروید.
  • توجه داشته باشید که منظور از  themename اسم قالب ویسایت شماست.
  • سپس وارد پوشه ی js قالب خود شده سپس فایل bootstrap-min.js را درون آن قرار دهید
  • سپس وارد پوشه ی css خود شده سپس فایل bootstrap-min.css را درون آن قرار دهید.
  • سپس فایل functions.php را ویرایش کرده و دو خط کد زیر را به آن اضافه کنید

شما با موفقیت توانستید فایل های بوت استرپ را داخل قالب خود انکلودش کنین به همین راحتی!

حال در قالب خود وارد پوشه ی js بشید و یه فایل به اسم tooltip.js به فایل های خود اضافه کنید و کد های زیر را داخل فایل ایجاد شده اضافه کنید

مطالب تصادفی -->  آموزش سازگار کردن قالب با fontawesome بدون نیاز به افزونه

سپس در فایل functions.php کد زیر را اضافه کنید.

حال فایل style.css خود را باز کنید و کد زیر را انتهای کد ها وارد کنید.

 

خب حال داخل هر تگی که می خواهید tooltip نمایش دهد، کد های زیر را داخل تگ اضافه کنید.

  • در بخش توضیحات متنی، هر آنچه که می خواهید داخل tooltip نمایش داده شود را وارد کنید
  • در بخش موقعیت، مکانی که می خواهید tooltip نمایش داده شود را وارد کنید (می توانید از یکی از عبارات top (بالا) یا right (راست) یا bottom (پایین) یا left (چپ) استفاده کنید)

برای مثال اگر شما یک تگ a دارید مثل آموزش کد زیر باید خاصیت های مربوطه را داخل تگ a قرار دهید.

کار تمام است شما با موفقیت توانستید tooltip را در وبسایت خود ایجاد کنید.

در صورت برخورد با هر گونه مشکل ، در قسمت دیدگاه ها با ما در میان بگذارید ما حتما پاسخ آن را برای شما ارسال خواهیم کرد

لینک کوتاه این آموزش :

راستی! جهت دریافت ویدئو های رایگان، عضو پیج اینیستاگرام ما شوید.

دوست من سوالی داری که پاسخشو نمی دونی؟

پاسخ سوالتو همین امروز دریافت کن

تاریخ انتشار :

تعداد بازدید : 146 بازدید

برچسب ها :


, , , , , , ,


پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دو + چهارده =

تبلیغات تصویری

بـراے دستــرسے سریع تر به سایــت، می توانــید وب سایـــت ما را بوکــمارک کنیــد .