• بخش 41 – طراحی وب واکنش گرا ، Tooltip در Bootstrap
بخش 41 – طراحی وب واکنش گرا ، Tooltip در Bootstrap
1395/02/31 - 18:28:45 // Responsive Web Design // 0 نظر // 225 بازدید

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

بخش 41 طراحی وب واکنش گرا ، Tooltip در Bootstrap

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

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

در زیر کد مربوط به استفاده از tooltip در یک کنترل button را مشاهده می کنید:

شما احتیاج به استفاده از خصیصه ی data-toggle خواهید داشت که مقدار آن را به tooltip تنظیم کرده اید . و همچنین خصیصه ی title متنی را که می خواهید به عنوان tooltip نمایش داده شود را در خود نگهداری می کند . و خصیصه ی data-placement یکی از چهار مقدار top , bottom , left , right را قبول می نماید که در واقع محل نمایش tooltip را نشان می دهد .

اگر کد بالا را در مرورگر اجرا نمایید ملاحظه می کنید که اجرای آن با شکست مواجه شده و tooltip را نشان نخواهد داد .

بدلایل بهبود عملکرد ، پلاگین tooltip در bootstrap باید بصورت دستی توسط jquery شناسانده شود . بنابراین کد زیر را برای این منظور می نویسیم .

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

حال صفحه ی خود را رفرش کنید تا tooltip را با بردن ماوس روی دکمه ی مورد نظر ببینید .

Tooltip و جاوا اسکریپت

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

این متد یک شیء که تنظیمات مختلف برای تغییر رفتار tooltip را شامل می شود دریافت می کند :

در این کد ما یک شی ء جاوا اسکریپتی به نام options تعریف کردیم و خصیصه ی animation را برابر با true قرار دادیم . بنابراین با اجرای کد می بینیم که با اتمام نمایش tooltip با یک افکت fade بسته خواهد شد . در نهایت این شیء را بصورت پارامتر به متد tooltip() ارسال می نماییم .

سایر خصیصه هایی که می توان به این متد ارسال کرد بصورت زیر می باشند :

· Html : این خصیصه یک مقدار Boolean می گیرد . اگر این مقدار برابر با true قرار گیرد آنگاه مقداری که در بخش title نوشته می شود بصورت یک کد HTML بررسی خواهد شد و بدین صورت دست شما برای قرار دادن هر چیزی در tooltip باز خواهد بود !

· Placement : این خصیصه پنج مقدار بصورت رشته ای قبول می کند : top , bottom , left , right , auto . که این مقدار وضعیت و موقعیت قرارگیری tooltip را با توجه به والد خود تعیین خواهد کرد . اگر برابر با auto قرار گیرد این tooltip بصورت اتوماتیک محل قرارگیری را تغییر خواهد داد .

· Selector : اگر بخواهید از tooltip در یک container استفاده نمایید ، شما می توانید با استفاده از این خصیصه فرزندانی که باید این متد را اجرا کنند فیلتر کنید . این تنظیم بعنوان مثال بصورت a[href=’hello.html’] و یا button[class=’tooltipButtons’] خواهد بود .

· Title : اگر شما از خصیصه ی data-title در کدهای HTML خود استفاده نکرده باشید ، می توانید آن را با استفاده از این تنظیم ارسال نمایید . این خصیصه یک مقدار رشته ای دریافت می کند .

مانند : title:” This is a button “

· Trigger : همه ی tooltip ها با رفتن روی یک کامپوننت به نمایش در می آیند . شما با استفاده از این تنظیم می توانید این رفتار پیش فرض را تغییر دهید . مقادیری که این خصیصه دریافت می کند برابر است با : click , focus, hover , manual . همچنین شما این مقادیر را می توانید با استفاده از فاصله بین آن دو با یکدیگر ترکیب کنید . بطور مثال : click hover , hover focus و ...

· Delay : اگر شما بخواهید که tooltip کمی با تاخیر به نمایش در آید می توانید از این خصیصه که بصورت میلی ثانیه مقدار می گیرد استفاده نمایید .

· Container : از این خصیصه در صورتی که بخواهید به یک المان خاص مثل Body پلاگین tooltip را اضافه کنید استفاده می گردد . این خصیصه از اینکه در تغییر سایز پنجره ها نمایش tooltip درجایی اشتباه به نمایش درآید جلوگیری می کند .

جدا از این مقادیر شیء option ، متد tooltip چندین رشته ی از پیش تعریف شده نیز دریافت می کند . بطور مثال در زیر یک نمونه از آن را می بینید :

ارسال این پارامتر tooltip را ظاهر می نماید . مقادیر قابل قبول بصورت زیر می باشد :

1. Show : نمایش tooltip .

2. Hide : پنهان کردن tooltip .

3. Toggle : تغییر وضعیت tooltip . اگر در حال حاضر پنهان باشد ظاهر می کند و بالعکس .

4. Destroy : این دستور tooltip را از بین برده و مخفی می کند .

مانند سایر پلاگین های bootstrap پلاگین tooltip نیز همراه رویدادهای خاصی می آید :

1. Show.bs.tooltip : قبل از نمایش tooltip این رویداد رخ می دهد .

2. Shown.bs.tooltip : بعد از نمایش tooltip رخ خواهد داد .

3. Hide.bs.tooltip : قبل از پنهان شدن tooltip رخ می دهد .

4. Hidden.bs.tooltip : بعد از پنهان شدن tooltip رخ خواهد داد .

در زیر کدی از استفاده ی این رویدادها ملاحظه می نمایید :

با اجرای کدهای بالا در مرورگر ، در کنسول مرورگر گوگل کروم تصویر زیر را مشاهده خواهید کرد :

دانلود سورس تمرین این قسمت

شاد و سلامت باشید

محمد جعفری فوتمی

محمد جعفری فوتمی
معرفی نویسنده : محمد جعفری فوتمی

از سال 1382 بطور تخصصی در زمینه ی طراحی وب سایت کار کرده ام و در طی 12 سال گذشته تجربیاتی را کسب کرده ام که در هیچ کتاب و منبع آنلاینی یافت نمی شود ، تصمیم گرفته ام تا این تجربیات را در قالب مقالاتی به اشتراک بگذارم . امیدوارم مفید واقع شود .

امتیاز به مطلب
           
نظرات کاربران
ارسال نظر