تولتیپ Tooltip

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

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

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

تولتیپ Tooltip، اسکرین‌تیپس ScreenTips یا هینت Hint
نمایی از یک دکمه با آیکن ذخیره سازی و تولتیپ نمایش داده شده هنگام قرارگرفتن نشانگر ماوس روی آن. این Tooltip شامل نام دکمه (Save) و میانبر منتسب به آن داخل پرانتز (Ctrl+S) می‌باشد.

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

تولتیپ Tooltip یکی از ابزارهای فتوشاپ

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

تولتیپ Tooltip نمایش داده شده روی یک فایل در برنامه مدیریت فایل ویندوز 10

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

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

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

تولتیپ هنگام لمس طولانی دکمه Send برای ارسال پیام در اپلیکیشن اندرویدی Gmail

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

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

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

استفاده از 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 یکی از زبان‌های اصلی در طراحی صفحات وب به شمار می‌رود.

پیوندهای پیشنهادی تک دیک

لینک واژه در ویکیپدیا

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

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