تولتیپ CSS (CSS Tooltip)
«تولتیپ CSS» راهی ساده برای نمایش توضیحات اضافی هنگام قرارگیری نشانگر ماوس روی یک عنصر است. سپس با CSS، متن راهنما را پنهان می کنیم و فقط روی هاور نمایش می دهیم.
ایجاد تولتیپ CSS پایه
ابتدا یک ظرف با کلاس .tooltip بسازید و متن راهنما را در عنصری با کلاس .tooltiptext قرار دهید. سپس با هاور، آن را قابل مشاهده کنید.
/* Container */
.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; cursor: pointer; }
/* Text */
.tooltiptext { visibility: hidden; width: 130px; background-color: black; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; }
/* Show on hover */
.tooltip:hover .tooltiptext { visibility: visible; }توضیح مثال
- یک عنصر والد با کلاس tooltip بسازید.
- متن را در یک <span class="tooltiptext"> قرار دهید.
- با position:relative روی والد و position:absolute روی متن، جای گذاری را کنترل کنید.
- گزینشگر :hover متن را از حالت پنهان خارج می کند.
موقعیت دهی تولتیپ
بسته به نیاز، می توانید تولتیپ را راست، چپ، بالا یا پایینِ متن قرار دهید.
راست و چپ
/* Right-aligned */
.tooltiptext { top: -5px; left: 105%; }
/* Left-aligned */
.tooltiptext { top: -5px; right: 105%; }بالا و پایین
/* Top-aligned */
.tooltiptext { width: 130px; bottom: 100%; left: 65%; margin-left: -65px; }
/* Bottom-aligned */
.tooltiptext { width: 130px; top: 100%; left: 50%; margin-left: -65px; }نکته: مقدار منفیِ margin-left برابر با نصفِ عرض تولتیپ است تا متن در مرکز قرار گیرد.
فلش تولتیپ با ::after
با شبه عنصر ::after و مرزبندی ها، فلشی مانند حباب گفتگو بسازید.
فلش پایین
.tooltiptext::after { content: " "; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; }فلش بالا
.tooltiptext::after { content: " "; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent; }فلش چپ و راست
/* Left arrow */
.tooltiptext::after { content: " "; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent black transparent transparent; }
/* Right arrow */
.tooltiptext::after { content: " "; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent black; }نکته: در صورت تغییر border-width فلش، مقدار آفستِ منفی را هم به همان اندازه به روزرسانی کنید تا فلش در مرکز بماند.
افکت محو تدریجی (Fade-in) تولتیپ
برای افکت نرم، از transition و opacity استفاده کنید تا تولتیپ به آرامی ظاهر شود.
.tooltiptext { opacity: 0; transition: opacity 2s; }
.tooltip:hover .tooltiptext { opacity: 1; }مطالب مرتبط: انیمیشن های CSS، تصاویر در CSS. همچنین درباره تولتیپ CSS و ::after بیشتر بخوانید.