طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

ساخت Tooltip با بوت استرپ


ساخت Tooltip با بوت استرپ

در HTML , می توانیم یک خاصیت title به المنت اضافه کنیم. متن مشخص شده در این خصوصیت به عنوان تولتیپ (Tooltip) با انجام رویداد mouse over نماش داده می شود.

در این آموزش jQuery , قصد داریم به شما نحوه ساخت Tooltip با استفاده از Bootstrap و قابلیت های استاندارد آن بر روی تولتیپ ها را نمایش بدیم.

ما تولتیپ بوت استرپ را با استفاده از سلکتور id که به تابع Tooltip پاس داده شده, مقدار دهی می کنم. در آموزش های قبلی با نحوه نمایش پیام اعتبارسنجی با Tooltip را دیدیم.

کتابخانه Tooltip بوت استرپ که تحت jQuery است, شامل آپشن های مختلفی برای سفارشی سازی استایل, سرعت, محتوا و بیشتر دارد. ما این مقادیر پیش فرض را هنگام فراخوانی تابع tooltip , بازنویسی کنیم.

ساخت Tooltip با بوت استرپ

در این مثال ساخت Tooltop با Bootstrap , مقدار delay را برای نمایش افکت انیمیشن و گزینه title را به همراه JavaScript ست می کنیم. اگر هیچ خصوصیت title مشخص نشود و یا خالی باشد پس title مشخص شده در جاوااسکریپت در داخل tooltip نمایش داده خواهد شد.

 

کد HTML المنت دارای Tooltip

کد زیر به شما یک المان که قرار است با رفتن ماوس روی آن, تابع tooltip روی آن صدا زده شود را نشان می دهد. این کد شامل چهار تگ DIV است که با hover شدن ماوس tooltip مورد نظر بر اساس خاصیت data-placement  نمایش داده می شود.

اسکریپت jQuery بر ساخت Tooltop

کد جی کوئری زیر به شما نحوه فراخوانی تابع tooltip با مشخص کردن آپشن های آن به عنوان آرگومان را نشان می دهد. در اینجا, مقدار delay و title ست شده است.

حتما بخوانید  تیک زدن همه چک باکس ها با jQuery

آپشن title شامل محتویات HTML است. در صورتی که مقدار html را true قرار دهید, در title می توانید کدهای HTML نیز قرار بدید.

جدول زیر به شما چندین آپشن دیگر از تابع tooltip و همچنین مقادیر پیش فرض را نشان می دهد.

Option Description Default
animation To add fade in / fade out effect to the tooltip popup. true
container To specify the element name within which the tooltip markup should be created dynamically to avoid overflow. false
delay To specify the time in millisecond for the animation effect. ۰
html It has boolean value to allow HTML code in the tooltip. true
placement It is to specify the position of the tooltip (top, right, bottom, left) top
template HTML template for the tooltip message. The title text will be included inside the div containing the class name tooltip-inner ‘<div class=”tooltip” role=”tooltip”><div class=”tooltip-arrow”></div><div class=”tooltip-inner”></div></div>’
title It accepts text/HTML to be added in the tooltip popup. If the html is true then the HTML code will be included. Otherwise, the HTML tags are stripped and the text content is included in the tooltip.
trigger event method like hover, focus, and manual that are to be used for triggering the tooltip. It accepts multiple trigger events ‘hover focus’
حتما بخوانید  ساخت قابلیت افزودن برچسب (Tag) با Bootstrap

خروجی ساخت Tooltop با Bootstrap

اسکرین شات زیر به شما پاپ آپ های تولتیپ المنت هایی که شامل title هستند را نشان می دهد. همچنین تولتیپ هایی که مقدار title ندارند و توسط جاوااسکریپت برای آنها عنوان مشخص کردیم را نیز می بینید.

ساخت Tooltip با بوت استرپ

کتابخانه Bootstrap.js

یک معرفی سریع درباره bootstrap.js برای کسانی که با آن آشنا نیستد. Bootstrap (بوت استرپ) مقدار زیادی از پلاگین های سفارشی جی کوئری را ارایه می دهد. همه این پلاگین ها در bootstrap.js وجود دارند یا می توانید فقط پلاگین های مورد نیاز را از اینجا دانلود و سفارشی سازی کنید. این پلاگین jQuery بوت استرپ دارای جی کوئری و چندین کتابخانه دیگر نیز هستند.

می توانید صفحه داکیومنت هر کدام از پلاگین ها را جداگانه مطالعه کنید. در آموزش ساخت Tooltop با بوت استرپ  از بسته کامل یعنی bootstrap.js استفاده کردیم.

 

امیدوارم از آموزش ساخت Tooltip با بوت استرپ نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید

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

دیدگاه کاربران

دیدگاهتان را بنویسید

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

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

افزایش امنیت سایت

مجوزهای ما

logo-samandehi

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

دانلود کتاب

عضویت در خبرنامه