تولتیپ Tooltip

تولتیپ یا Tooltip چیست؟

تولتیپ (Tooltip) یکی از انواع المان های مورد استفاده در رابط های کاربری گرافیکی است که معمولا هنگام مکث روی برخی از المان های دیگر در قالب جعبه‌ای حاوی یک متن ظاهر می‌شود و اطلاعاتی در مورد آن المان ارائه می‌دهد. هینت (Hint یا راهنما) و اسکرین تیپس (ScreenTips) از جمله عناوین رایج دیگری هستند که برای این نوع المان ها به کار می‌رود.

استفاده از اصطلاح Tooltip (ترکیب واژه‌های Tool + Tip به معنای تحت اللفظی راهنمای ابزار) به کاربرد اولیه و رایج این نوع المان برای آیتم‌های موجود در نوار ابزارها برمی‌گردد. با این وجود امروزه از تولتیپ‌ها برای انواع مختلف المان‌ها از دکمه ها و چک باکس ها گرفته تا بخش‌هایی از متون و حتی تصاویر موجود در صفحات وب استفاده می‌شود.

به عنوان مثالی ساده در تصویر زیر می‌توانید نمونه یک تولتیپ که هنگام قرار گرفتن نشانگر ماوس روی ابزار Content Aware Move Tool در نرم افزار Adobe Photoshop نمایان شده را مشاهده کنید. این تولتیپ علاوه بر نام ابزار و میانبر صفحه کلید مربوطه، توضیح کوتاهی در مورد عملکرد ابزار ارائه داده است.

در تصویر زیر نیز می‌توانید نمونه‌ای دیگر از یک تولتیپ در نرم افزار مدیریت فایل ویندوز 10 را مشاهده کنید. این تولتیپ هنگام قرار گرفتن نشانگر ماوس روی یک فایل تصویر، اطلاعاتی نظیر فرمت فایل، ابعاد تصویر و حجم آن را نمایش می‌دهد.

نحوه نمایش Tooltip در دستگاه‌های مختلف

زمانی که کاربر نشانگر ماوس خود را روی یک المان نگه می‌دارد (Mouse hover) پس از مدتی کوتاه، تولتیپ اختصاص داده شده به آن المان (در صورت وجود) نمایان می‌شود. در اغلب موارد تا زمانی که نشانگر ماوس روی المان باقی می‌ماند تولتیپ نمایش داده می‌شود و با خارج شدن نشانگر از روی المان نیز بلافاصله پنهان می‌شود.

در صفحه نمایش‌های لمسی نیز معمولا تولتیپ هنگام فشار یا لمس طولانی مدت یک المان ظاهر می‌شود. به عنوان مثال در تصویر زیر می‌توانید Tooltip نمایش داده شده هنگام لمس طولانی مدت دکمه Send در اپلیکیشن اندرویدی Gmail را مشاهده کنید.

کاربردهای تولتیپ

همان‌طور که گفته شد از تولتیپ ها برای ارائه اطلاعات مختلفی در مورد انواع المان‌های رابط‌های کاربری گرافیکی استفاده می‌شود. برای مثال نام یک آیتم در نوار ابزار و میانبر صفحه کلید اختصاص داده شده به آن، توضیحات مربوط به عملکرد یک دکمه، معنای کوتاه یک واژه تخصصی در یک صفحه وب، عنوان تصویری در یک صفحه وب و … از جمله اطلاعاتی است که با کمک تولتیپ نمایش داده می‌شود.

استفاده از Tooltip ها به خصوص در مورد المان‌هایی که ممکن است عملکرد آن‌ها برای کاربران جدید یا مبتدی نامشخص باشد مفید خواهد بود. به عنوان مثال دکمه ها یا ابزارهایی که در آن‌ها از آیکن به جای نام استفاده شده است یا چک باکسی که عملکردش به طور کامل از روی برچسب (یا عنوان) آن برای کاربر قابل تشخیص نیست از جمله این المان‌ها به شمار می‌رود.

سایر مزایای تولتیپ

تولتیپ ها ضمن کمک به ارائه اطلاعات در مورد المان‌های رابط کاربری از شلوغی محیط نرم افزار جلوگیری کرده و در عین حال به صرفه‌جویی در فضای موردنیاز المان‌ها نیز کمک می‌کنند.

افزون بر این با وجود Tooltip ها کاربر برای کسب اطلاعات در مورد اجزای رابط کاربری یک نرم افزار نیازی به مراجعه مداوم به راهنمای آن نخواهد داشت. این موضوع به خصوص برای نرم افزارهای حرفه‌ای و پیچیده به شکل قابل توجهی کارگشا می‌باشد.

در عین حال تولتیپ نیاز به سعی و خطا برای تست عملکرد اجزای مختلف نرم افزار و اشتباهات ناشی از آن را نیز کاهش می‌دهد. برای مثال بخش ارسال پیام در اپلیکیشن Gmail (که در تصاویر بالا قابل مشاهده است) را در نظر بگیرید. یک کاربر مبتدی ممکن است ندانسته دکمه Send را به منظور پیدا کردن روشی برای افزودن فایل ضمیمه لمس کند. اما با ارسال ناخواسته پیام روبرو شود. این درحالیست که لمس طولانی مدت دکمه و مشاهده تولتیپ آن می‌تواند مانع از بروز این اشتباه شود.

Tooltip ها در طراحی رابط کاربری و صفحات وب

طبیعتا استفاده از تولتیپ‌ها در طراحی رابط کاربری گرافیکی برای تمامی المان‌ها الزامی نیست. در عین حال با توجه به اهمیت تولتیپ و مثال‌های بالا، استفاده از آن برای برخی از المان‌ها مفید و ضروری به نظر می‌رسد. فراموش نکنید به‌کارگیری صحیح و مناسب این اجزا می‌تواند به ایجاد یک تجربه کاربر پسند کمک کند. از همین‌رو در اغلب پلتفرم ها، ابزارهای توسعه نرم افزار و طراحی رابط کاربری از ویجت‌های اختصاصی برای ایجاد Tooltip پشتیبانی می‌شود.

معمولا در مرورگرهای وب، اگر ویژگی سراسری title به یک تگ اختصاص داده شده باشد مقدار آن به عنوان متن تولتیپ هنگام قرار گرفتن نشانگر ماوس روی المان متناظر نمایش داده می‌شود. به عنوان مثال در قطعه کد HTML زیر از عبارت Hypertext Markup Language برای این ویژگی در تگ abbr استفاده شده است:

<p style="border: 1px solid #f00;"><abbr title="Hypertext Markup Language">HTML</abbr> یکی از زبان‌های اصلی در طراحی صفحات وب به شمار می‌رود.</p>

نتیجه این قطعه کد را می‌توانید با قرار دادن نشانگر ماوس روی واژه HTML در پاراگراف زیر مشاهده کنید. استفاده از این روش برای نمایش معادل کامل یک اصطلاح کوتاه شده (یا مخفف) در صفحات وب رایج می‌باشد.

HTML یکی از زبان‌های اصلی در طراحی صفحات وب به شمار می‌رود.