در ادامه مطلب همراه ما باشید
اگر در وب سایت خود ، لینک ، تصویر ، لوگو و یا آیکونی دارید که متن آن به اندازه کافی گویا نیست ، نیاز به یک Tooltip دارید . Tooltip ها کارایی سایت را بالا برده و باعث می شوند کاربری سایت آسان شود. همانطور که در مطلب ۸ راه برای دوری از اشتباهات رایج در طراحی وب عنوان شد ، یکی از مهمترین مسائلی که در طراحی سایت باید در نظر داشته باشید ، آسان بودن کاربری سایت است . در این آموزش یاد خواهید گرفت که چطور برای سایت خود Tooltip هایی بدون جاوااسکریپت و بدون استفاده از عکس و تنها با استفاده از HTML و CSS بسازید .
آیا من به یک Tooltip نیاز دارم ؟
به طور پیش فرض شما می توانید با استفاده از صفت Title در عناصر HTML برای هر کدام عناصر خود یک Tooltip تعریف کنید ، اما Tooltip پیش فرض قابلیت طراحی دلخواه ندارد . با این شرایط استفاده از کدهای CSS برای ساخت یک Tooltip زیبا و سفارشی شده راه حل مناسبی است .
چطور ساخته شده است ؟
برای داشتن عنصری در صفحه وب که بتواند روی دیگر لایه ها ظاهر شود و در چیدمان عناصر صفحه مشکلی به وجود نیاید ، تکنیکی وجود دارد به شرح زیر :
یک عنصر نگهدارنده مثل div یا span وجود دارد که یک عنصر دیگر را در بر میگیرد . در استایل عنصر نگهدارنده بیرونی خاصیت position را برابر relative و در داخلی همین خاصیت را برابر با absolute قرار میدهیم . شاید این تکنیک برای شما تکراری باشد و من هم قصد ندارم چرخ را دوباره اختراع کنم ، بلکه میخواهم چگونگی ساخت Tooltip را باهم یاد بگیریم .
در تصویر زیر ساختمان Tooltip را مشاهد میکنید . برای فلش اشاره گر و خط حاشیه (border) اطراف آن ، از خاصیت های after و befor در CSS استفاده میکنیم .
برای ایجاد سایه و گرادینت بر روی Tooltip از کدهای box-shodow و gradient در CSS3 استفاده میکنیم .
چرا از تگ <a> برای متن هایی که Tooltip دارند استفاده میکنیم؟
همانطور که مشاهده میکنید در کد HTML ، از تگ <a> متنی که میخواهیم Tooltip داشته باشد استفاده میکنیم . در داخل این تگ از یک عنصر <span>برای نمایش متن مورد نظر در Tooltip استفاده میکنیم . میتوانستیم از عنصر دیگری مثلا” <label> یا <p> به جای<a> برای بخش هایی که میخواهیم Tooltip داشته باشند استفاده کنیم ، اما استفاده از تگ <a>به این دلیل است که IE6 با خاصیت hover برای دیگر عناصر HTML کمی مشکل دارد . با این حال اگر میخواهید Tooltip را برای عنصر دیگری در صفحه وب ، بغیر از عنصر <a>بکار گیرید .
کدهای CSS
.tooltip .tooltip span .tooltip:hover .tooltip:hover span .tooltip span:before, .tooltip span:before |
پشتیبانی مرورگرها
این Tooltip به صورت cross-browser ساخته شده است . بدین معنی که در مرورگرهای مدرن و محبوب و همچنین IE6 و IE7 می تواند کار کند . هر چند که این آموزش بر پایه CSS3 بوده و طراحی بر این اساس در حال گسترش تدریجی است .