Tooltip
ساخت 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 .tooltiptext {
top: -5px;
left: 105%;
}
نتیجه:
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
نتیجه:
اگر می‌خواهید Tooltip در بالا یا پایین نمایش داده شود، مثال های زیر را ببینید. توجه داشته باشید که ما از ویژگی margin-left با مقدار ۶۰- پیکسل استفاده می‌کنیم. این کار برای قرار دادن tooltip در وسط جهت بالا / پایین متن قابل hover است. این مقدار برابر با نصف عرض tooltip تنظیم می‌شود (120/2 = 60).
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the 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 استفاده کنید و در مدت زمان معینی از ثانیه (۱ ثانیه در مثال)، از حالت تمام پنهان به حالت ۱۰۰٪ قابل رویت بروید:
منابع آموزشی