CSS Tooltip

Tooltip همون متن یا توضیح کوچیکی هست که وقتی موس روی یه المنت میره، به صورت شناور نمایش داده میشه. مثل راهنما برای کاربر.

🔹 روش ساده با title در HTML

ساده‌ترین راه:

<button title="این یک تولتیپ است">دکمه</button>

ولی این تولتیپ پیش‌فرض مرورگره و زیاد قابل استایل‌دهی نیست.

🔹 ساخت Tooltip سفارشی با CSS

میایم یه المنت می‌سازیم و متن تولتیپ رو داخل ::after یا span مخفی می‌کنیم و وقتی موس رفت روش، نمایش می‌دیم.

📌 مثال ۱: تولتیپ ساده

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>CSS Tooltip</title>
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }

    /* متن تولتیپ */
    .tooltip .tooltip-text {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      padding: 5px;
      border-radius: 6px;

      /* موقعیت */
      position: absolute;
      z-index: 1;
      bottom: 125%; /* بالای دکمه */
      left: 50%;
      transform: translateX(-50%);

      /* افکت */
      opacity: 0;
      transition: opacity 0.3s;
    }

    /* فلش تولتیپ */
    .tooltip .tooltip-text::after {
      content: "";
      position: absolute;
      top: 100%; /* زیر تولتیپ */
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: black transparent transparent transparent;
    }

    /* نمایش هنگام hover */
    .tooltip:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="tooltip">🖱️ برو روی من
    <span class="tooltip-text">سلام! من یه تولتیپ هستم</span>
  </div>
</body>
</html>

📌 مثال ۲: تولتیپ در چهار جهت

فقط کافیه جای top, bottom, left, right رو تغییر بدی. مثلا:

.tooltip .tooltip-text {
  bottom: auto;
  top: 125%; /* زیر المنت */
}

📌 مثال ۳: تولتیپ با انیمیشن فِید

.tooltip .tooltip-text {
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: translate(-50%, 10px);
}

.tooltip:hover .tooltip-text {
  opacity: 1;
  transform: translate(-50%, 0);
}

➡️ تولتیپ با یه حرکت نرم ظاهر میشه.

✅ نکات مهم

  • با position: absolute تولتیپ رو به المنت مرجع وصل می‌کنیم.

  • برای زیبایی بیشتر می‌شه از transition, animation, opacity استفاده کرد.

  • می‌شه برای موبایل هم tap-based tooltip طراحی کرد.