تولتیپ چیست و چگونه می‌توانید برای کلمات و عناصر سایت، توضیحات نمایش دهید؟ تولتیپ‌ها(Tooltip) یکی از عناصر مهم و کاربردی در طراحی UX و UI هستند که به صورت یک کادر کوچک و موقتی ظاهر می‌شوند و اطلاعات تکمیلی یا راهنمایی‌های لازم را به کاربران ارائه می‌دهند.

تولتیپ معمولاً زمانی نمایش داده می‌شود که کاربر نشانگر ماوس خود را روی یک عنصر خاص مثل نوشته، دکمه یا تصویر قرار می‌دهد، آن را لمس می‌کند یا با استفاده از از صفحه کلید دستگاه آن را فوکوس می‌کند.

از آن‌جایی که استفاده از تولتیپ در وردپرس ماهیت غیر مزاحم و حالت درخواستی دارد، به عنوان یک روش مفید برای ارائه اطلاعات اضافی بدون ایجاد شلوغی در صفحه شناخته می‌شود.

تولتیپ نه تنها به کاربران کمک می‌کند تا عملکرد عناصر صفحه را بهتر درک کنند، بلکه می‌تواند تجربه کاربری را نیز بهبود ببخشد. برای مثال، در یک فرم، اگر کاربری فیلدی را به اشتباه پر کند، با استفاده از قابلیت تولتیپ می‌توان پیام خطا را نمایش داد و راهنمایی لازم را ارائه کرد.

این ویژگی باعث می‌شود که کاربران سایت یا اپلیکیشن کمتر دچار سردرگمی شوند و بتوانند به راحتی تعامل داشته باشند. علاوه‌براین، با استفاده از تولتیپ می‌توان برای ارائه نکات آموزشی، نمایش اطلاعات اضافی درباره یک عنصر مثل دکمه یا آیکن و حتی درباره محصولات استفاده کرد.

در این مقاله، علاوه بر پاسخ به سوال تولتیپ چیست، به نحوه اضافه کردن تولتیپ به عناصر المنتور و نوشته‌های سایت با استفاده از افزونه و کد می‌پردازیم.

تولتیپ چیست؟

همان‌طور که در ابتدای مقاله گفتیم تولتیپ یک کادر کوچک است که زمانی که کاربر نشانگر موس خود را روی یک کلمه، تصویر یا عناصر دیگری مثل دکمه یا آیکن قرار می‌دهد، ظاهر می‌شود.

تولتیپ‌ها می‌توانند شامل اطلاعاتی مثل لینک، آدرس، توضیحات متنی و غیره باشند. این قابلیت به شما کمک می‌کند تا اطلاعات بیشتری را در اختیار کاربران قرار دهید، بدون این‌که صفحه سایت شلوغ شود.

تولتیپ ها در موارد زیر کاربرد دارند:

• راهنمایی کاربران درباره عملکرد یک عنصر
• نمایش اطلاعات اضافی درباره یک المان خاص
• اعتبارسنجی فرم‌ها
• بهبود دسترسی‌پذیری
• راهنمای کاربران جدید

مزایای استفاده از تولتیپ در وردپرس

تولتیپ یکی از قابلیت‌های کاربردی در ودرپرس است که می‌تواند تأثیر زیادی در بهبود تجربه کاربری و افزایش تعامل کاربران با سایت داشته باشد. در ادامه، برخی از مزایای استفاده از تولتیپ در وردپرس را بیان می‌کنیم:

کاهش سردرگمی کاربران: با ارائه توضیحات سریع و مختصر، تولتیپ‌ها از سردرگمی کاربران جلوگیری می‌کنند.

صرفه‌جویی در فضای صفحه: تولتیپ‌ها اطلاعات اضافی را فقط در صورت نیاز نمایش می‌دهند و باعث شلوغی صفحه نمی‌شوند.

افزایش تعامل کاربران: تولتیپ‌ها کاربران را تشویق می‌کنند تا با عناصر مختلف سایت تعامل داشته باشند.

قابلیت شخصی‌سازی: می‌توانید ظاهر و محتوای تولتیپ‌ها را بر اساس نیازهای سایت خود سفارشی کنید.

سادگی در پیاده‌سازی: ساخت تولتیپ یا نمایش توضیحات برای کلمات در وردپرس به‌راحتی با استفاده از افزونه یا کدنویسی امکان‌پذیر است که در ادامه به شما آموزش می‌دهیم.

نحوه اضافه کردن تولتیپ به وردپرس با افزونه

در وردپرس، شما می‌توانید به راحتی از قابلیت تولتیپ استفاده کنید. برای این کار، نیاز به نصب یک افزونه دارید. افزونه‌های متعددی برای این منظور وجود دارند، اما ما استفاده از افزونه WordPress Tooltips را به شما پیشنهاد می‌کنیم. این افزونه رایگان است و امکانات زیادی را در اختیار شما قرار می‌دهد.

افزودن توضیحات برای کلمات در وردپرس

این افزونه به شما امکان می‌دهد تا برای متن‌ها و تصاویر سایت خود، تولتیپ‌های دلخواه ایجاد کنید. همچنین، کار با این افزونه بسیار ساده است و حتی کاربران مبتدی نیز می‌توانند به راحتی از آن استفاده کنند.

برای اضافه کردن تولتیپ به وردپرس باید در ابتدا افزونه wordpress tooltip را از مخزن وردپرس دانلود، نصب و فعال کنید. برای این کار می‌توانید از آموزش نصب افزونه در وردپرس استفاده کنید.

بعداز فعال سازی افزونه، منویی با عنوان “نکات راهنما” یا “Tooltip” به پیشخوان وردپرس اضافه می‌شود. یکی از مزیت‌های مهم این افزونه، قابلیت شخصی سازی و فارسی بودن تنظیمات آن است. به همین دلیل کاربران مبتدی نیز به راحتی می‌توانند تولتیپ‌ها را سفارشی سازی کنند.

برای این‌که بتوانید از این افزونه استفاده کنید و برای کلمات سایت خود تولتیپ تعیین کنید، کافیه از پیشخوان وردپرس>منوی تولتیپ روی گزینه افزودن تولتیپ جدید کلیک کنید.

در مرحله بعد وارد صفحه‌ای می‌شوید که شبیه به پست تایپ نوشته‌ها در وردپرس است. این صفحه شامل عنوان و بخش توضیحات است. برای ساخت تولتیپ کافیه کلمه مورد نظر خود را در بخش عنوان قراردهید و در بخش توضیحات متن مربوط به تولتیپ را تایپ کنید و تولتیپ ساخته شده را انتشار دهید.

برای مثال ما برای کلمه “سفارش طراحی سایت” عبارت ” با شماره 09119362023 تماس بگیرید” را اضافه کردیم. بعداز انتشار این تولتیپ، عبارت سفارش طراحی سایت در هرجای سایت دیده شود، شامل تولتیپ می‌باشد.

ساخت تولتیپ در المنتور

شاید شما هم جزء افرادی باشید که علاقه داشته باشید برای هر المانی در المنتور تولتیپ بسازید. برای مثال برای دکمه‌ها، آیکن‌ها، تصاویر و … تولتیپی شامل توضیحات اضافه، قرار دهید. برای این کار کافیه در ابتدا از طریق پیشخوان>المنتور>کدهای سفارشی، کدهای زیر را در بخش انتهای بادی قرار دهید.

<style>

.tooltip {
position: absolute;
background: #fff;
color: #333;
font-size: 14px;
padding: 8px 12px;
border-radius: 6px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
white-space: nowrap;
opacity: 0;
visibility: hidden;
transform: translate(-50%, -10px);
transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
z-index: 1000;
}

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

.tooltip.active {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0px);
}

</style>

<script>
document.addEventListener(“DOMContentLoaded”, function () {
const elements = document.querySelectorAll(“[title]”); // Find all elements with title attribute

elements.forEach(el => {
let tooltipText = el.getAttribute(“title”); // Get the title text
if (!tooltipText) return; // Skip if no title

let tooltip = document.createElement(“div”);
tooltip.classList.add(“tooltip”);
tooltip.textContent = tooltipText;
document.body.appendChild(tooltip);

// Remove default title attribute to avoid default browser tooltip
el.removeAttribute(“title”);

el.addEventListener(“mouseenter”, (e) => {
tooltip.classList.add(“active”);
let rect = el.getBoundingClientRect();
tooltip.style.top = `${rect.top + window.scrollY – tooltip.offsetHeight – 10}px`;
tooltip.style.left = `${rect.left + window.scrollX + rect.width / 2}px`;
});

el.addEventListener(“mouseleave”, () => {
tooltip.classList.remove(“active”);
});
});
});

</script>

«کدنوشته شده توسط: ناصر رئیسی»

سپس وارد صفحه ویرایشگر المنتور در یکی از صفحات سایت شوید. برای بررسی صحت عملکرد کد اضافه شده، یک دکمه به صفحه اضافه کنید.

از تنظیمات دکمه وارد تب پیشرفته شوید. سپس در بخش “خصوصیات” متنی که قصد دارید بعد از هاور موس روی دکمه نمایش داده شود را به شکل الگوی زیر اضافه کنید.

Title|متن مورد نظر

نتیجه‌گیری

تولتیپ‌ها ابزارهای کوچک اما قدرتمندی هستند که می‌توانند تجربه کاربری را بهبود بخشند. با استفاده درست از آن‌ها، می‌توانید اطلاعات لازم را به کاربران ارائه دهید، بدون اینکه صفحه را شلوغ کنید یا کاربر را سردرگم کنید. اگر به اصول طراحی و دسترسی‌پذیری توجه کنید، تولتیپ‌ها می‌توانند به یکی از بهترین ابزارهای شما در طراحی رابط کاربری تبدیل شوند.

پس، دفعه بعد که در حال طراحی یک وب‌سایت یا اپلیکیشن هستید، به یاد داشته باشید که تولتیپ‌ها می‌توانند کمک بزرگی به کاربران شما کنند.