جلسه ۲۸ : پلاگین Tooltip در Bootstrap 3

• جزئیات
• نوع محتواآموزش تصویری

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند. اگر در وب سایتهای مختلف، دقت کرده باشید، وقتی اشاره گر ماوس را روی برخی از عناصر html وب سایت از جمله button می برید، پیغام راهنمای کوچکی در پایین یا سمت های دیگر همان عناصر،ظاهر می شود،که tooltip نامیده می شود. در این آموزش ما چگونگی ایجاد این پیغام راهنما در bootstrap 3 را به همراه چگونگی تغییر قالب و فرمت آن، ارائه خواهیم داد. در ادامه ی این آموزش به منظور آشنایی با پلاگین tooltip در bootstrap 3 و طرز استفاده از آن، با ما همراه باشید.

پلاگین tooltip در bootstrap 3

پلاگین tooltip برای نمایش یک پیغام راهنما در حاشیه یا لبه ی عناصر html، زمانیکه کاربر اشاره گر ماوس را روی آن می برد، استفاده می شود.

پلاگین tooltip در bootstrap 3

نکته: bootstrap برای استفاده از ویژگی tooltip از فایل “tooltip.js” و یکی از دو فایل “bootstrap.js” یا “bootstrap.min.js” استفاده می کند.

چگونگی ایجاد tooltip

برای ایجاد tooltip در یک عنصر ،باید صفت data-toggle="tooltip" را به عنصر مرود نظر اضافه کنید.

صفت title نیز برای مشخص کردن متنی که در پلاگین tooltip نمایش داده می شود، کاربرد دارد:

نکته: برای فراخوانی توابع jQuery ورد نیاز برای ایجاد پلاگین tooltip باید تابع ()tooltip را بصورت زیر فراخوانی کنید:

مشخص کردن محل نمایش tooltip روی عنصر مورد نظر

در حالت پیش فرض tooltip در قسمت بالای عناصر html ظاهر می شود.

از صفت data-placement برای تنظیم موقعیت پلاگین tooltip در جهت های پایین، چپ و راست، استفاده می شود:

نکته:

می توانید از صفت data-placement با مقدار “auto” استفاده کنید. تا مرورگر بصورت خودکار موقعیت مناسب tooltip را روی عناصر html تعیین کند.

کلام آخر

پلاگین tooltip ابزار بسیار مناسبی برای ایجاد یک راهنمای کوچک جهت کمک به کاربران در هنگام کار با بخش های مختلف وب سایت شماست. مباحث این بخش برای آشنایی با پلاگین tooltip در bootstrap 3 برای شما ارائه شد. امیدواریم که از مباحث فوق، بخوبی استفاده کرده باشید.