/ در آموزش طراحی وب, آموزش ها, اشتراک رایگان / توسط
آخرین زمان ویرایش:

آموزش ساخت Tooltip با استفاده از CSS3

 در ادامه مطلب همراه ما باشید

اگر در وب سایت خود ، لینک ، تصویر ، لوگو و یا آیکونی دارید که متن آن به اندازه کافی گویا نیست ، نیاز به یک 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
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}

.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover
{
border: 0; /* IE6 fix */
}

.tooltip:hover span
{
visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
content: “”;
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0
}

.tooltip span:before
{
border-top-color: #ccc;
bottom: -8px;
}

پشتیبانی مرورگرها

این Tooltip به صورت cross-browser ساخته شده است . بدین معنی که در مرورگرهای مدرن و محبوب و همچنین IE6 و IE7 می تواند کار کند . هر چند که این آموزش بر پایه CSS3 بوده و طراحی بر این اساس در حال گسترش تدریجی است .

نوشته های مشابه

۸ اشتباه در استفاده از تگ های HTML

در ادامه مطلب همراه ما باشید (بیشتر…)

۷ نکته برای شروع شغل طراحی وب حرفه ای

در ادامه مطلب همراه ما باشید (بیشتر…)

 کانال تلگرام داده باران شارژ آنلاین

نظری بدهید

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