ایجاد Tooltip زیبا با CSS — مفاهیم، نمونه‌ها و نکات حرفه‌ای

Tooltip یا نمایشگر راهنما (hover hint) یکی از ابزارهای مهم رابط کاربری است که اطلاعات تکمیلی را هنگام قرارگیری موس یا فوکوس روی عناصر نمایش می‌دهد. در این مقاله به صورت گام‌به‌گام روش‌های ساخت Tooltip زیبا و قابل دسترس با CSS را شرح می‌دهیم، همراه با نمونه‌های عملی، انیمیشن، پیکربندی موقعیت و نکات برای پشتیبانی از موبایل و دسترسی (accessibility).

اصول پایه‌ای Tooltip با CSS

یک Tooltip ساده معمولاً با استفاده از pseudo-element ها (:before یا :after) یا یک عنصر فرزند مخفی شده و سپس هنگام hover یا focus ظاهر می‌شود. کلیدها: پوزیشنینگ مناسب، محدودیت عرض، فاصله از هدف و transition برای انیمیشن نرم.

<button class="tooltip" aria-describedby="tt1">
  Save
  <span role="tooltip" id="tt1">ذخیره تغییرات</span>
</button>

/* CSS */.tooltip { position: relative; }
.tooltip span {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #222;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
  font-size: 13px;
  z-index: 10;
}
.tooltip:hover span,
.tooltip:focus-within span {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

در این مثال یک دکمه با یک عنصر span داخلی داریم که نقش Tooltip را بازی می‌کند. از aria-describedby و role=”tooltip” برای دسترسی بهتر استفاده شده است. CSS‌ پوزیشنینگ را مدیریت می‌کند و با transition نمایش را نرم می‌کند.

اضافه کردن مثلث (Arrow) به Tooltip

.tooltip span::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #222 transparent transparent transparent;
}

این قطعه کد یک مثلث کوچک ایجاد می‌کند که درست زیر Tooltip قرار می‌گیرد و ظاهری کلاسیک به آن می‌دهد. با تغییر border-color یا مقادیر border-width می‌توان شکل و اندازه مثلث را تغییر داد.

پشتیبانی از جهات مختلف (Top / Bottom / Left / Right)

برای اینکه Tooltip در جهات مختلف کار کند، می‌توانیم کلاس‌هایی مثل .top، .right، .bottom و .left تعریف کنیم و قواعد پوزیشنینگ و مثلث را مطابق جهت تغییر دهیم.

.tooltip.top span { bottom: 120%; left: 50%; transform: translateX(-50%) translateY(10px); }
.tooltip.bottom span { top: 120%; left: 50%; transform: translateX(-50%) translateY(-10px); }
.tooltip.left span { right: 120%; top: 50%; transform: translateY(-50%) translateX(10px); }
.tooltip.right span { left: 120%; top: 50%; transform: translateY(-50%) translateX(-10px); }

/* مثلث‌ها نیز مشابهاً قابل تعریف‌اند */

با این الگو به راحتی می‌توانید Tooltip را برای عناصر مختلف و بر اساس نیاز طراحی کنید.

انیمیشن و ظاهرسازی پیشرفته

برای جذاب‌تر شدن می‌توان از ترکیب opacity، transform و filter استفاده کرد. همچنین استفاده از CSS variables کدنویسی را تمیزتر و قابل تنظیم‌تر می‌کند.

:root {
  --tt-bg: #222;
  --tt-color: #fff;
  --tt-radius: 6px;
  --tt-gap: 10px;
}
.tooltip span {
  background: var(--tt-bg);
  color: var(--tt-color);
  border-radius: var(--tt-radius);
  padding: 8px 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  filter: blur(0);
  transition: opacity 200ms cubic-bezier(.2,.8,.2,1), transform 200ms cubic-bezier(.2,.8,.2,1);
}

با CSS variables می‌توانید در یک مکان رنگ، فاصله و شعاع گوشه را تغییر دهید تا تم‌های مختلف پیاده‌سازی شود.

دسترس‌پذیری (Accessibility)

• از aria-describedby برای متصل کردن Tooltip به عنصر هدف استفاده کنید.
• برای پشتیبانی از صفحه‌خوان‌ها، role=”tooltip” را به عنصر Tooltip اضافه کنید.
• Tooltip باید با کیبورد قابل دسترسی باشد: از :focus و :focus-within قواعد hover را تکرار کنید.
• برای محتوای طولانی‌تر، از max-width و white-space: normal استفاده کنید تا متن بشکند و قابل خواندن باشد.

مشکل موبایل و دستگاه‌های لمسی — راه حل با JavaScript

روی موبایل hover وجود ندارد، بنابراین بهتر است با یک تعامل لمسی مانند tap نمایش Tooltip را کنترل کنیم. در ادامه نمونه ساده‌ای با JS برای مدیریت نمایش با کلیک/لمس آورده شده است.

// simple JS toggle for touch devices
document.addEventListener('click', function(e) {
  const t = e.target.closest('.tooltip');
  document.querySelectorAll('.tooltip.show').forEach(el => {
    if (el !== t) el.classList.remove('show');
  });
  if (t) {
    t.classList.toggle('show');
  }
});

// CSS: .tooltip.show span { opacity:1; transform: translateY(0); pointer-events:auto; }

این اسکریپت کلیک روی هر عنصر tooltip را شنود می‌کند و با افزودن کلاس .show آنرا نمایش می‌دهد. همچنین سایر Tooltipهای باز را می‌بندد تا تنها یکی باز باشد. این روش ساده و سبک است اما برای پروژه‌های بزرگ‌تر ممکن است نیاز به مدیریت رویدادهای خارج از کلیک (مانند touchstart یا Escape برای بستن) نیز داشته باشید.

مقایسه: CSS-only vs JavaScript

نکات و بهینه‌سازی نهایی

• Tooltipهای طولانی را کوتاه کنید یا از لینک «بیشتر» استفاده کنید تا محتوای ثانویه در پنجره جداگانه باز شود.
• از transition‌های کوتاه و طبیعی استفاده کنید (100–250ms) تا احساس روان داشته باشد.
• مطمئن شوید که Tooltip از لبه صفحه خارج نمی‌شود — با محاسبه موقعیت یا media queries موقعیت را اصلاح کنید.
• برای طراحی سیستم، یک کامپوننت Tooltip قابل پیکربندی با CSS variables و API ساده JS بسازید.

نتیجه‌گیری

ساخت Tooltip زیبا و قابل دسترس با CSS امکان‌پذیر و نسبتاً ساده است. برای پشتیبانی بهتر از موبایل و کنترل‌های پیچیده‌تر می‌توانید JavaScript سبک اضافه کنید. همیشه دسترسی (ARIA و کیبورد) و واکنش‌گرا بودن را در طراحی Tooltip در اولویت قرار دهید تا تجربه کاربری هم برای کاربران ماوس و هم برای کاربران صفحه‌خوان و دستگاه‌های لمسی بهینه باشد.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال