Tooltip

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
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 }



منابع آموزشی