Tooltip

Main Page Tutorial
موارد آموزشی
CSS پیشرفته
۱	گوشه‌های گرد
۲	کادر تصاویر
۳	پس‌زمینه‌ها
۴	رنگ‌ها
۵	Gradientها
۶	سایه‌ها
۷	افکت‌های متن
۸	قلم‌های وب
۹	2D Transforms
۱۰	3D Transforms
۱۱	Transitions
۱۲	انیمیشن‌ها
۱۳	Tooltip
۱۴	استایل‌دهی تصاویر
۱۵	ویژگی object-fit
۱۶	دکمه‌ها
۱۷	مثال‌های صفحه‌بندی (Pagination)
۱۸	ستون‌های متعدد
۱۹	رابط کاربری
۲۰	متغیرها
۲۱	Box Sizing
۲۲	Flexbox
۲۳	Media Queries
۲۴	مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

ساخت tooltip با CSS.

نسخهٔ نمایشی: مثال‌های Tooltip

یک tooltip (راهنمای ابزار) اغلب برای مشخص کردن اطلاعات اضافی درمورد چیزی، در هنگام قرار گرفتن اشاره گر ماوس روی یک عنصر استفاده می‌شود:

Tooltip پایه

ساخت یک tooltip که هنگام قرار گرفتن نشانه گر ماوس روی یک عنصر توسط کاربر نمایش داده می‌شود:

مثال

 1 <style>
 2 /* Tooltip container */
 3 .tooltip {
 4   position: relative;
 5   display: inline-block;
 6   border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
 7 }
 8 
 9 /* Tooltip text */
10 .tooltip .tooltiptext {
11   visibility: hidden;
12   width: 120px;
13   background-color: black;
14   color: #fff;
15   text-align: center;
16   padding: 5px 0;
17   border-radius: 6px;
18  
19   /* Position the tooltip text - see examples below! */
20   position: absolute;
21   z-index: 1;
22 }
23 
24 /* Show the tooltip text when you mouse over the tooltip container */
25 .tooltip:hover .tooltiptext {
26   visibility: visible;
27 }
28 </style>
29 
30 <div class="tooltip">Hover over me
31   <span class="tooltiptext">Tooltip text</span>
32 </div>

مشاهدهٔ نتیجه

توضیح مثال

HTML: استفاده از یک عنصر نگه دارنده (مانند <div>) و اضافه‌کردن کلاس "tooltip" به آن. هنگامی که کاربر نشانه‌گر ماوس را روی این <div> می‌برد، متن tooltip نمایش داده خواهد شد.

متن tooltip درون یک عنصر درون خطی (به انگلیسی: inline) (مانند <span>) با class="tooltiptext" قرار می‌گیرد.

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

کلاس tooltiptext متن فعلی tooltip را نگهداری می‌کند. این کلاس به طور پیش فرض پنهان است، و هنگام hover شدن نمایان خواهد شد. همچنین تعدادی استایل‌های پایه به آن اضافه کرده‌ایم: ۱۲۰ پیکسل عرض، رنگ پس زمینه مشکی، رنگ متن سفید، وسط چین و padding از سمت بالا و پایین به اندازه 5 پیکسل.

ویژگی border-radius برای اضافه‌کردن گوشه‌های گرد به متن tooltip استفاده می‌شود.

انتخابگر :hover برای نمایش متن Tooltip هنگامی که کاربر نشانه‌گر موس را روی عنصر <div> با class="tooltip" می‌برد استفاده می‌شود.

موقعیت دهی به Tooltip

[[رده:]]

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

Tooltip سمت راست

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

مشاهدهٔ نتیجه

Tooltip سمت چپ

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

مشاهدهٔ نتیجه

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

Tooltip بالا

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

مشاهدهٔ نتیجه

Tooltip پایین

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

مشاهدهٔ نتیجه

فلش های Tooltip

برای ساخت یک فلش (Arrow) که می‌بایست در جهت خاصی از tooltip ظاهر شود، بعد از tooltip محتوای «خالی» با شبه کلاس ::after به همراه ویژگی content اضافه کنید. فلش، خود با استفاده از borderها ساخته می‌شود. این امر موجب می‌شود تا tooltip همانند یک کادر گفتگو نمایش داده شود.

این مثال نحوه اضافه‌کردن یک فلش به پایین یک 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;
}

مشاهدهٔ نتیجه

توضیح مثال

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

نکته: ویژگی border-width اندازه پیکان را مشخص می‌کند. اگر شما این مقدار را تغییر دهید، می‌بایست مقدار margin-left را هم تغییر دهید تا برابر باشند. این امر موجب قرارگیری پیکان در وسط می‌شود.

ویژگی border-color برای تبدیل (Transform) محتوای درون یک پیکان استفاده می‌شود. کادر بالایی را مشکی، و سایر را نیز شفاف می‌کنیم. اگر همه جهات مشکی بودند، با یک مربع مشکی مواجه می‌شدید.

این مثال نحوه اضافه‌کردن یک فلش به بالای tooltip را نشان می‌دهد. توجه کنید که این بار رنگ کادر پایین را تنظیم می‌کنیم:

فلش رو به بالا

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

مشاهدهٔ نتیجه

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

فلش سمت چپ

.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 نشان می‌دهد:

فلش سمت راست

.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;
}

مشاهدهٔ نتیجه

Tooltipهای ظاهر شونده (Fade In) (انیمیشن)

اگر می‌خواهید متن tooltip زمانی که در حال نمایان شدن است به به آرامی ظاهر شود، می‌توانید از ویژگی transition به همراه ویژگی opacity در CSS استفاده کنید و در مدت زمان معینی از ثانیه (۱ ثانیه در مثال)، از حالت تمام پنهان به حالت ۱۰۰٪ قابل رویت بروید:

مثال

1 .tooltip .tooltiptext {
2   opacity: 0;
3   transition: opacity 1s;
4 }
5 
6 .tooltip:hover .tooltiptext {
7   opacity: 1;
8 }

مشاهدهٔ نتیجه

صفحهٔ بعد»

«صفحهٔ قبل