آموزش ایجاد تولتیپ(Tooltip) در CSS

در این مقاله به آموزش تولتیپ ها در CSS می پردازیم.

ایجاد تول تیپ در CSS

از یک تول تیپ اغلب برای مشخص کردن اطلاعات اضافی در مورد چیزی، وقتی که کاربر نشانگر ماوس خود را روی یک عنصر می برد، استفاده می شود.

ایجاد تول تیپ های ساده

در مثال زیر، یک تول تیپ ایجاد کرده ایم که وقتی کاربر ماوس خود را روی یک عنصر می برد، ظاهر می شود:

<style>
/* ظرف تول تیپ */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* اگر می خواهید زیر متنی که ماوس روی آن می رود نقطه وجود داشته باشد */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* موقعیت متن تول تیپ */
  position: absolute;
  z-index: 1;
}

/* نشان دادن تولتیپ وقتی که ماوس روی ظرف تولتیپ می رود */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">ماوس را اینجا بیاورید
  <span class="tooltiptext">متن تول تیپ</span>
</div> 

 توضیح مثال بالا

توضیح کدهای HTML : از یک عنصر دربردارنده، مانند <div> برای اضافه کردن کلاس tooltip به آن استفاده کنید. وقتی که کاربر ماوس خود را روی این <div> می برد، متن تول تیپ نشان داده می شود. متن تول تیپ، را در درون یک عنصر خطی یا inline (مانند <span>) با کلاس "class="tooltiptext قرار می دهیم.

توضیح کدهای CSS : کلاس tooltip از دستور position:relative استفاده می کند که برای موقعیت دهی متن تول تیپ(position:absolute) به آن نیاز داریم.
نکته: برای موقعیت دهی(position) تول تیپ، مثال های زیر را مشاهده کنید.

کلاس tooltiptext متن حقیقی تول تیپ را نگهداری می کند. تول تیپ به طور پیش فرض پنهان(hidden) است و وقتی ماوس را روی آن ببریم(hover کنیم) نمایش داده می شود. ما همچنین مقداری استایل ساده ی دیگر را به آن اضافه کرده ایم:

width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;

کدهای بالا به ترتیب:

عرض : 120 پیکسل

رنگ پس زمینه: مشکی

رنگ متن: سفید

ترازبندی متن: وسط

پدینگ(padding) : به مقدار 5 پیکسل از بالا و پایین.

همچنین ویژگی سی اس اس border-radius نیز برای اضافه کردن گوشه های گرد شده به متن تول تیپ، اضافه شده است. از سلکتور hover: برای نمایش دادن متن تول تیپ، وقتی که کاربر ماوس خود را روی <div> با کلاس "class="tooltip  می برد، استفاده می شود.

موقعیت دهی(Position) به تول تیپ ها

در این مثال، تول تیپ در سمت راست(left:105%) از متن "ماوس خود را اینجا بیاورید"، قرار گرفته است(<div>). همچنین توجه کنید که از دستور top:-5px برای در وسط قرار دادن متن تولتیپ، در عنصر دربردارنده ی آن استفاده شده است. ما به این علت از مقدار 5 استفاده کرده ایم که متن تول تیپ از یک پدینگ(padding) به مقدار 5px برای top و bottom استفاده می کند.

اگر padding آن را افزایش دهیم، برای اینکه مطمئن شویم که متن در وسط قرار می گیرد، مقدار ویژگی top را باید افزایش دهیم. همچنین اگر بخواهیم تول تیپ در سمت چپ قرار گیرد، به طریق مشابهی عمل می کنیم.

.tooltip .tooltiptext {
  top: -5px;
  left: 105%;
}

.tooltip .tooltiptext {
  top: -5px;
  right: 105%;
}

اگر می خواهید تول تیپ شما در بالا یا پایین قرار گیرد، به مثال های زیر توجه کنید.

نکته: توجه کنید که ما (در مثال زیر) از ویژگی margin-left با مقدارِ منفی 60 پیکسل استفاده کرده ایم. استفاده از این مقدار، به خاطر این است که این تول تیپ در سمت بالا و پایین، در وسط متن مورد اشاره قرار گیرد. این مقدار 60 پیکسل برابر با نصف عرض تول تیپ (120/2 = 60) می باشد.

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* استفاده از نیمی از عرض برای وسط چین کردن تول تیپ (120/2 = 60).  */
}

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* استفاده از نیمی از عرض برای وسط چین کردن تول تیپ (120/2 = 60).  */
}

 پیکان یا فلش های تولتیپ

 برای ایجاد یک فلش که باید از یک سمت تول تیپ نمایش یابد، یک ویژگی content خالی را در کلاس tooltip قرار دهید و از شبه عنصر ِ after:: پس از تولتیپ(tooltip) استفاده کنید. فلش ما خود به خود با استفاده از کادرها، نمایش خواهد یافت. این باعث می شود که تول تیپ مانند یک حباب نقل قول به نظر برسد.  این مثال نشان می دهد که چگونه می توانیم یک فلش را در پایین یک تول تیپ اضافه کنیم:

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

 توضیح مثال بالا:

فلش را با استفاده از دستور top: 100% درون تول تیپ قرار دهید که باعث می شود فلش در پایین تول تیپ قرار گیرد. و دستور left: 50% باعث می شود فلش در وسط قرار گیرد.

نکته: ویژگی border-width سایز فلش را مشخص می کند. اگر می خواهید آن را تغییر دهید، margin-left را نیز تغییر دهید و مقداری مشابه را در آن قرار دهید. این کار باعث می شود فلش در وسط قرار گیرد.

از ویژگی border-color برای تبدیل محتوای درون یک فلش استفاده می شود. ما کادر(border) بالایی را به رنگ مشکی و بقیه را به صورت شفاف(transparent) در آورده ایم. اگر تمام جهات آن را مشکی کنیم، در نهایت با یک فلش مربعی سیاه مواجه خواهیم شد.

این مثال، نشان می دهد که چگونه یک فلش را در بالای تول تیپ اضافه کنیم. توجه کنید که این دفعه، رنگ کادر پایینی(bottom border)  را تنظیم می کنیم:

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* در بالای تول تیپ */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

 این مثال نشان می دهد که چگونه می توانیم یک فلش را به سمت چپ تول تیپ اضافه کنیم:

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

این مثال نشان می دهد که چگونه می توانیم یک فلش، در سمت راست یک تول تیپ ایجاد کنیم:

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* To the right of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}

تول تیپ های محو شونده(انیمیشن)

اگر می خواهید متن تول تیپ را وقتی که نزدیک است نمایان شود، به صورت محو شونده نشان دهید، می توانید از ویژگی transition به همراه ویژگی opacity استفاده کنید؛ و مقدار آن را از 0 (یعنی محو شدگی کامل) به 100% (یعنی کاملا واضح) تغییر دهید و این کار را ظرف چند ثانیه(یک ثانیه در این مثال) انجام دهید:

.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}