تولتیپ‌ها یا همان ابزارک‌های راهنما در طراحی وب، نقش بسیار مهمی دارند. می‌توانند به صورت یک لایه‌ی اضافی برای ارائه اطلاعات بیشتر به کاربر استفاده شوند بدون اینکه در ظاهر اولیه صفحات شما خللی ایجاد کنند. در حقیقت، هنگامی که یک کاربر ماوس خود را روی یک عنصر خاص می‌برد، تولتیپ اطلاعاتی اضافی را نمایش می‌دهد. این تکنیک در بهبود تجربه کاربری بسیار مؤثر است.
با استفاده از CSS، می‌توانید تولتیپ‌های زیبایی بسازید که همگی به راحتی در مرورگرهای جدید پشتیبانی می‌شوند. با استفاده از استایل‌های مختلف، این امکان وجود دارد که ظاهر تولتیپ‌ها را مطابق با نیازهای خاصتان تغییر دهید و جلوه‌های ویژه‌ای ایجاد کنید.
مثلاً می‌توانید با استفاده از position و visibility در CSS، تولتیپ‌ها را طراحی کنید. معمولاً برای این کار از عناصر span یا div به صورت تو در تو استفاده می‌شود که تولتیپ‌ها به صورت برجسته داخل این عناصر قرار می‌گیرند.
یکی از ساده‌ترین راه‌ها برای ایجاد تولتیپ، استفاده از ویژگی title در HTML است که البته این روش خیلی قابل تنظیم نیست. اگر بخواهید به تولتیپ‌های خود استایل بدهید، باید مستقیماً از CSS استفاده کنید.
در ادامه یک مثال ساده از تولتیپ با استفاده از CSS آورده شده است تا بهتر با نحوه پیاده‌سازی آن آشنا شوید.
<style>
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<div class="tooltip">
Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
توضیح خط به خط کد:
کد .tooltip را برای ایجاد یک عنصر با قابلیت نمایش تولتیپ تعریف می‌کنیم.
داخل .tooltip، استایل‌هایی مثل position و inline-block برای نمایش تولتیپ اضافه شده است.
کد .tooltip .tooltiptext برای تنظیم تنظیمات تولتیپ، مثل visibility و background-color استفاده می‌شود.
برای ایجاد افکت‌های نمایش و مخفی‌سازی، از ویژگی transition استفاده می‌شود که تغییرات opacity را در زمان مشخص اعمال می‌کند.
برای رویداد hover از کلاس .tooltip:hover .tooltiptext استفاده می‌کنیم تا نمایش و مخفی‌سازی تولتیپ را کنترل کنیم.