ایجاد tooltip در Bootstrap

تاریخ انتشار: 26 دی 1394

تعداد بازدید: 50 نفر

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

tooltip چیست ؟

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

فعال کردن tooltip :

tooltipها میتوانند از طریق جاوا اسکریپت فعال شوند کافیست تابع ( )tooltip. را همراه با id یا کلاس عنصر مقصد، در کد جاوا اسکریپت فراخوانی نمایید.

خروجی مثال بالا به شکل زیر خواهد بود :

نکته : باید خودتان به tooltipها مقدار دهی کنید.

تنظیم مکان قرارگیری tooltip :

میتوانید tooltip را طوری تنظیم کنید که در بالا، پایین و سمت چپ یک عنصر قرار گیرد.

تنظیم مکان قرارگیری tooltip از طریق ویژگی -data :

مثال زیر نحوه تنظیم مکان tooltip را با استفاده از -data نمایش میدهد :

مثال زیر نحوه تنظیم مکان tooltip را با استفاده از جاوا اسکریپت نمایش میدهد :

خروجی مثال های بالا به شکل زیر خواهد بود :

آپشن ها :

آپشن های مشخصی وجود دارند که که میتوانند جهت تغییر عملکرد پلاگین tooltip ، به تابع ( )tootip. پاس داده شوند.

نام	نوع	مقدار پیش فرض	توضیحات
animation	boolean	true	افکت fade به tooltip اضافه میکند. (CSS transition)
html	boolean	false	html را داخل tooltip قرار میدهد. اگر false باشد، متد ()text. در jQuery برای قرار دادن محتوا در DOM استفاده خواهد شد. اگر نگران حمله های XSS هستید از text استفاده کنید.
placement	رشته/تابع	'top'	مکان tooltip را در بالا/پایین/چپ/راست یا auto تنظیم میکند. اگر مقدار آن auto تنظیم شود، مکان آن به صورت پویا تغییر میکند. برای مثال اگر مقدار آن auto top تنظیم شود tooltip را در بالا نشان خواهد داد ولی اگر این امکان وجود نداشته باشد آن را در پایین نشان میدهد.
selector	رشته	false	اگر selector وجود داشته باشد، آبجکت های tooltip به مقصدهای مشخص پیوست خواهند شد.
title	رشته/تابع	''	مقدار پیش فرض title را تنظیم میکند در صورت نبودن ویژگی title
trigger	رشته	'hover focus'	نحوه فعال شدن tooltip را مشخص میکند (کلیک/بردن موس روی آن/focus کردن/دستی)
delay	عدد/object	0	زمان وقفه در حالت نمایش یا مخفی شدن (میلی ثانیه). در حالت فعال کردن دستی اعمال نمیشود. اگر عددی تعیین شود این عدد برای هر دو حالت show و hide خواهد بود. ساختار : { `delay: { show: 500, hide: 100`
container	رشته/false	false	tooltip را به یک عنصر مشخص اضافه میکند. '`container: 'body`
template	رشته		html پایه جهت استفاده برای ایجاد tooltip . عنوان tooltip داخل div با کلاس tooltip-inner. قرار میگیرد و div با کلاس tooltip-arrow. ، جهت tooltip خواهد بود. خارجی ترین div باید کلاس tooltip. را داشته باشد.
viewport	رشته/object	`selector: '#viewport', padding: 0`	tooltip را در داخل مرزهای این عنصر نگه میدارد. مثال : '`viewport: '#viewport` یا `{ selector: '#viewport', padding: 0 }`

میتوانید این آپشن ها را با استفاده از -data یا جاوا اسکریپت به کار ببرید. جهت استفاده از آپشن ها از طریق -data ، نام آپشن مورد نظر را به انتهای -data اضافه کنید و مقدار مناسب را به آن بدهید مانند "data-placement="bottom" ، data-animation="false و غیره.
با این حال جاوا اسکریپت راه بهتری برای استفاده از این آپشن ها میباشد زیرا از کار تکراری جلوگیری میکند. تابع ( tooltip (options.( )$ را در قسمت زیر مشاهده کنید تا چگونگی استفاده از آپشن ها با استفاده از جاوا اسکریپت را متوجه شوید.

توابع :

توابع زیر، توابع استاندارد بوت استرپ برای tooltip ها میباشند.

( tooltip (options.( )$

این تابع، tooltip را به گروهی از عناصر پیوست میکند. همچنین اجازه میدهد که برای tooltipها آپشن بگذارید. بنابراین میتوانید آن ها را با توجه به نیازتان تغییر دهید.

زمانی که ویژگی title در تگ a موجود نباشد یا مقدار آن دچار مشکل شده باشد، متن موجود در این تابع در tooltip نمایش داده میشود.
مثال زیر نحوه قرار دادن محتوای HTML در داخل یک tooltip را نمایش میدهد :

خروجی مثال بالا به شکل زیر خواهد بود :

مثال زیر نحوه کنترل زمان بندی نمایش و مخفی شدن tooltipها را با استفاده از آپشن delay توسط جاوا اسکریپت نمایش میدهد.

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

مثال زیر کد HTML ایجاد شده برای tooltip را به انتهای یک کانتینر با کلاس wrapper. به جای body اضافه میکند.

نکته : باطل کردن مقدار آپشن کانتینر پیش فرض در tooltipها، هیچ تغییر قابل مشاهده ای را در صفحه ایجاد نمیکند. جهت مشاهده نتیجه واقعی باید DOM را با استفاده از firebug یا ابزار توسعه دهنده، inspect نمایید.
به طور مشابه میتوانید با استفاده از تابع ( tooltip (options.( )$ ، آپشن های دیگری برای tooltipها بگذارید.

(' tooltip ('show.

این تابع، tooltip یک عنصر را نمایش میدهد(میتوانید نمایش tooltip را با دکمه ها کنترل نمایید).

(' tooltip ('hide.

این تابع، tooltip یک عنصر را مخفی میکند(میتوانید مخفی شدن tooltip را با دکمه ها کنترل نمایید).

(' tooltip ('toggle.

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

(' tooltip ('destroy.

این تابع، tooltip یک عنصر را مخفی کرده و آن را از بین میبرد.

رویدادها (Event):

event	توضیحات
show.bs.tooltip	این event به محض فراخوانی تابع show فعال میشود.
shown.bs.tooltip	این event زمانی که tooltip برای کاربر visible میشود، فعال میشود. قبل از فعال شدن تا زمان کامل شدن عملیات transition در CSS منتظر میماند.
hide.bs.tooltip	این event به محض فراخوانی تابع hide فعال میشود.
hidden.bs.tooltip	این event زمانی که عملیات مخفی بودن tooltip از کاربر پایان می یابد، فعال میشود. این event تا پایان کامل عملیاتtransition در CSS منتظر میماند و بعد فعال میشود.
inserted.bs.tooltip	این event زمانی که قالب tooltip به DOM اضافه شده و بعد از show.bs.tooltip ، فعال میشود.

مثال زیر زمانی که عملیات fade out یک tooltip پایان می یابد یک پیام هشدار به کاربر نمایش میدهد (به محض برداشتن موس از روی عنصر مورد نظر).

مطلب بعدی -> ایجاد پنجره های هشدار ( alert ) در Bootstrap

اشتراک گذاری:

مشاهده نمونه های بیشتر

24 تیر 1403

ثبت مکان در گوگل مپ: آموزش ثبت رایگان مکان کسب و کارتان تنها در ۵ گام

20 تیر 1403

اینفوگرافیک چیست؟ انواع، کاربرد ها و مراحل ساخت Infographic

2 خرداد 1402

راهنمای جامع طراحی سایت فروشگاهی

این راهنما شما را با دانش و استراتژی های مورد نیاز طراحی سایت فروشگاهی استثنایی مجهز می کند. برای کشف قدرت طراحی در فروش آنلاین و ایجاد یک برند دیجیتال موفق آماده شوید.