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

اگر در وب سایت خود ، لینک ، تصویر ، لوگو و یا آیکونی دارید که متن آن به اندازه کافی گویا نیست ، نیاز به یک Tooltip دارید . Tooltip ها کارایی سایت را بالا برده و باعث می شوند کاربری سایت آسان شود. همانطور که در مطلب 8 راه برای دوری از اشتباهات رایج در طراحی وب عنوان شد ، یکی از مهمترین مسائلی که در طراحی سایت باید در نظر داشته باشید ، آسان بودن کاربری سایت است . در این آموزش یاد خواهید گرفت که چطور برای سایت خود Tooltip هایی بدون جاوااسکریپت و بدون استفاده از عکس و تنها با استفاده از HTML و CSS بسازید .

● مشاهده دمو
● دانلود سورس HTML

ساخت تولتیپ با css

آیا من به یک Tooltip نیاز دارم ؟

به طور پیش فرض شما می توانید با استفاده از صفت Title در عناصر HTML برای هر کدام عناصر خود یک Tooltip تعریف کنید ، اما Tooltip پیش فرض قابلیت طراحی دلخواه ندارد . با این شرایط استفاده از کدهای CSS برای ساخت یک Tooltip زیبا و سفارشی شده راه حل مناسبی است .

چطور ساخته شده است ؟

برای داشتن عنصری در صفحه وب که بتواند روی دیگر لایه ها ظاهر شود و در چیدمان عناصر صفحه مشکلی به وجود نیاید ، تکنیکی وجود دارد به شرح زیر :
یک عنصر نگهدارنده مثل div یا span وجود دارد که یک عنصر دیگر را در بر میگیرد . در استایل عنصر نگهدارنده بیرونی خاصیت position را برابر relative و در داخلی همین خاصیت را برابر با absolute قرار میدهیم . شاید این تکنیک برای شما تکراری باشد و من هم قصد ندارم چرخ را دوباره اختراع کنم ، بلکه میخواهم چگونگی ساخت Tooltip را باهم یاد بگیریم .
در تصویر زیر ساختمان Tooltip را مشاهد میکنید . برای فلش اشاره گر و خط حاشیه (border) اطراف آن ، از خاصیت های after و befor در CSS استفاده میکنیم .

ساخت tooltip

برای ایجاد سایه و گرادینت بر روی Tooltip از کدهای box-shodow و gradient در CSS3 استفاده میکنیم .


کد HTML


  your text
  Your tooltip description


چرا از تگ <a> برای متن هایی که Tooltip دارند استفاده میکنیم؟

همانطور که مشاهده میکنید در کد HTML ، از تگ <a> متنی که میخواهیم Tooltip داشته باشد استفاده میکنیم . در داخل این تگ از یک عنصر <span>برای نمایش متن مورد نظر در Tooltip استفاده میکنیم . میتوانستیم از عنصر دیگری مثلا" <label> یا <p> به جای<a> برای بخش هایی که میخواهیم Tooltip داشته باشند استفاده کنیم ، اما استفاده از تگ <a>به این دلیل است که IE6 با خاصیت hover برای دیگر عناصر HTML کمی مشکل دارد . با این حال اگر میخواهید Tooltip را برای عنصر دیگری در صفحه وب ، بغیر از عنصر <a>بکار گیرید ، میتوانید تکه کد jQuery زیر را در تگ <header>بنویسید تا این مشکل IE6 حل شود :



 

کدهای 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 بوده و طراحی بر این اساس در حال گسترش تدریجی است .

نظرات (7) -

  • صابر

    09/10/1390 07:06:11 ق.ظ | پاسخ به این نظر

    سلام ممنون اطلاعات خیلی مفیدی داخل وبسایتتون وجود داره
    برای من خیلی جدید هم بود
    متشکر

    • Admin

      09/10/1390 07:10:21 ق.ظ | پاسخ به این نظر

      مرسی صابر جان، از اینکه وقت میزارید و مطالعه می کنید، ممنونم.

  • مژگان

    01/18/1392 01:46:19 ب.ظ | پاسخ به این نظر

    من هم بسیار متشکرم و باید از شما تشکر کرد برای زحمتی که میکشید و آموزش های مفید و جامعی رو در اختیار ما قرار میدید Smile

Loading