ساخت 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 ست شده است.

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

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

OptionDescriptionDefault
animationTo add fade in / fade out effect to the tooltip popup.true
containerTo specify the element name within which the tooltip markup should be created dynamically to avoid overflow.false
delayTo specify the time in millisecond for the animation effect.۰
htmlIt has boolean value to allow HTML code in the tooltip.true
placementIt is to specify the position of the tooltip (top, right, bottom, left)top
templateHTML 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>’
titleIt 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.
triggerevent method like hover, focus, and manual that are to be used for triggering the tooltip. It accepts multiple trigger events‘hover focus’

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

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

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

کتابخانه Bootstrap.js

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

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

 

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

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

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

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

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۲)

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

  1. soheila ۳ مرداد ۱۳۹۸

    سلام. اگر متنی حاوی لینک داخل تولتیپ باشه ، امکان کلیک کردن روی اون لینک وجود داره؟
    فرض کنید مثلا متن داخل تولتیپ : برای کسب اطلاعات بیشتر اینجا مراجعه کنید.
    میخوام کاربر روی اینجا کلیک کنه و …

    پاسخ
    1. حسن شفیعی ۳ مرداد ۱۳۹۸

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

      پاسخ
دوره های آموزشی