CSS ابزار نکته
- صفحه قبل CSS انیمیشن
- صفحه بعدی CSS سبک عکس
ابزارنما (Tooltip) با استفاده از CSS ایجاد می‌شود.
مثال: ابزارنما
مثال
وقتی کاربر ماوس را روی یک عنصر می‌برد، ابزارنما معمولاً برای ارائه اطلاعات اضافی در مورد محتوا استفاده می‌شود:
ابزارنما پایه‌ای
یک ابزارنما نمایش داده می‌شود که وقتی ماوس بر روی یک عنصر قرار می‌گیرد، نمایش داده می‌شود:
مثال
<style>
/* مخزن ابزارنما */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* اگر می‌خواهید خط‌نقطه زیر متن فعال شود */
}
/* متن ابزارنما */
.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> حرکت می‌دهد، متن ابزار توضیحی نمایش داده می‌شود.
متن ابزار توضیحی در class="tooltiptext" عناصر تعبیه‌شده (مانند <span>) استفاده می‌شود.
CSS:
tooltip کلاس position:relative، برای قرار دادن متن ابزار توضیحی استفاده می‌شودposition:absolute()). توجه داشته باشید که
tooltiptext کلاس‌ها محتوای واقعی ابزار توضیحی را ذخیره می‌کنند. به صورت پیش‌فرض مخفی هستند و در زمان قرار گرفتن ماوس بر روی آن‌ها قابل مشاهده می‌شوند (لطفاً به ادامه مراجعه کنید). ما همچنین چند استایل پایه به آن‌ها اضافه کرده‌ایم: عرض 120 پیکسلی، پس‌زمینه سیاه، متن سفید، قرار دادن متن در وسط و حاشیه‌های بالای و پایینی 5 پیکسلی (padding).
CSS border-radius این مقیاس برای افزودن کمان‌های گرد به متن ابزار توضیحی استفاده می‌شود.
وقتی کاربر ماوس خود را بر روی <div> با class="tooltip" حرکت می‌دهد،:hover انتخابگر برای نمایش متن ابزار توضیحی است.
محل‌دهی ابزار توضیحی
در این مثال، ابزار توضیحی در سمت راست متن قابل کلیک (<div>) قرار داردleft:105%()). توجه داشته باشید کهtop:-5px برای قرار دادن آن در وسط عنصر حاوی آن استفاده می‌شود. ما از عدد 5 استفاده کرده‌ایم زیرا حاشیه‌های بالای و پایینی ابزار توضیحی 5 پیکسلی هستند. اگر حاشیه‌های داخلی را افزایش دهید، لطفاً آن‌ها را نیز افزایش دهید top مقدار مقیاس برای اطمینان از اینکه ابزار توضیحی در وسط باقی می‌ماند. اگر می‌خواهید ابزار توضیحی در چپ قرار گیرد، این نکته نیز اعمال می‌شود.
ابزار توضیحی راست
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
نتیجه:
ابزار توضیحی چپ
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
نتیجه:
اگر می‌خواهید ابزار توضیحی در بالا یا پایین قرار گیرد، به مثال زیر نگاه کنید. توجه داشته باشید که ما از پارامتر margin-left منفی 60 پیکسلی استفاده کرده‌ایم. این کار برای قرار دادن ابزار توضیحی در وسط متن قابل کلیک انجام می‌شود. این مقدار نصف عرض ابزار توضیحی است (120/2 = 60).
ابزار توضیحی بالا
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* استفاده از نصف عرض (120/2 = 60) برای قرار دادن ابزار توضیحی در وسط */
}
نتیجه:
ابزار توضیحی پایین
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* استفاده از نصف عرض (120/2 = 60) برای قرار دادن ابزار توضیحی در وسط */
}
نتیجه:
شاخک ابزار توضیحی
برای ایجاد یک شاخک که در سمت مشخصی از ابزار توضیحی نمایش داده شود، محتوای خالی را به ابزار توضیحی اضافه کنید و از کلاس پوسته استفاده کنید ::after و content این ویژگی‌ها. فلاش خود به وسیله لبه‌ها ایجاد می‌شود. این باعث می‌شود که ابزارنمایکدوم مانند یک حباب به نظر برسد.
این مثال نشان می‌دهد که چگونه می‌توان یک فلاش به سمت پایین در ابزارنمایکدوم اضافه کرد:
مطلي به سمت پایین
.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: سياه شفاف شفاف شفاف;
}
نتیجه:
توضیحات مثال
فلاش را در داخل ابزارنمایکدوم قرار دهید:top: 100% فلاش را در پایین ابزارنمایکدوم قرار دهید.left: 50% این باعث می‌شود که فلاش در وسط قرار گیرد.
توجه:border-width این ویژگی اندازه فلاش را مشخص می‌کند. اگر این تنظیم را تغییر دهید، لطفاً margin-left مقدار به مقدار مشابه تغییر دهید. این باعث می‌شود که فلاش در وسط قرار گیرد.
border-color برای تبدیل محتوای داخلی به یک فلاش استفاده می‌شود. ما لبه‌های بالا را سیاه و بقیه را شفاف تنظیم کرده‌ایم. اگر همه لبه‌ها سیاه باشند، در نهایت یک مربع سیاه خواهید گرفت.
این مثال نشان می‌دهد که چگونه می‌توان یک فلاش به سمت بالا در ابزارنمایکدوم اضافه کرد. توجه داشته باشید که این بار ما رنگ لبه‌های پایین را تنظیم کرده‌ایم:
مطلي به سمت بالا
.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: شفاف شفاف سياه شفاف;
}
نتیجه:
این مثال نشان می‌دهد که چگونه می‌توان یک فلاش به سمت چپ در ابزارنمایکدوم اضافه کرد:
مطلي به سمت چپ
.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: شفاف سياه شفاف شفاف;
}
نتیجه:
این مثال نشان می‌دهد که چگونه می‌توان یک فلاش به سمت راست در ابزارنمایکدوم اضافه کرد:
مطلي به سمت راست
.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: شفاف شفاف شفاف سياه;
}
نتیجه:
ورودی ابزار نکته (انیمیشن)
اگر می‌خواهید در متن ابزار نکته‌ای که قرار است نمایش داده شود، ورودی و خروجی داشته باشید، می‌توانید CSS transition ویژگی با opacity ویژگی‌ها با هم استفاده می‌شوند و در مدت زمان مشخصی (در مثال 1 ثانیه) از ناپیدایی کامل به 100٪ قابل مشاهده تغییر می‌کنند:
مثال
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- صفحه قبل CSS انیمیشن
- صفحه بعدی CSS سبک عکس
