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