کدهای آماده ساخت تولتیپ‌های (Tooltip) مدرن و انیمیشنی

رفیق برنامه‌نویس، بیا رو راست باشیم! دیگه دوران تولتیپ‌های خشک و بی‌روح که فقط یه متن ساده نشون میدادن تموم شده. امروز کاربران توقع دارن وقتی موس رو روی یه عنصر میارن یا با انگشتشون لمسش می‌کنن، یه تجربه بصری جذاب و کاربردی داشته باشن. تولتیپ‌های مدرن و انیمیشنی نه تنها اطلاعات رو شیک‌تر منتقل می‌کنن، بلکه به بهبود رابط کاربری و تجربه کاربری کلی (UX) سایتت هم کمک شایانیی می‌کنن. اگه دنبال کدهای آماده و یه راهنمای جامع هستی تا بتونی این المان‌های جذاب رو به پروژه‌هات اضافه کنی، دقیقاً جای درستی اومدی. این مقاله مثل یه نقشه راه کامله که از صفر تا صد ساخت تولتیپ‌های خفن رو بهت یاد میده. منتظر چی هستی؟ بیا ابزارهای جدید و بی‌نظیر برای توسعه وب رو در فروشگاه ما کشف کن و پروژه‌هایت را متحول کن! همین الان یه زنگ بزن و مشاوره رایگان بگیر: ۰۹۲۰۲۲۳۲۷۸۹

┌───────────────────────────────────────────────────────────────┐
│  هدف: ساخت تولتیپ‌هایی با حس و حال حرفه‌ای و انیمیشن‌های روان     │
├───────────────────┬───────────────────────────────────────────┤
│  قدم ۱: HTML       │  ساختار پایه (عنصر هدف + محتوای تولتیپ)           │
│                   │  مثال: Hover Me      │
├───────────────────┼───────────────────────────────────────────┤
│  قدم ۲: CSS        │  استایل‌دهی (مخفی کردن اولیه، موقعیت‌دهی، ظاهر)    │
│                   │  انیمیشن‌ها (Opacity, Transform, Transition)  │
│                   │  رسپانسیو کردن برای موبایل و دسکتاپ       │
├───────────────────┼───────────────────────────────────────────┤
│  قدم ۳: JavaScript │  تعامل‌پذیری (نمایش/پنهان‌سازی هنگام Hover/Focus) │
│                   │  کنترل دینامیک محتوا و موقعیت‌دهی دقیق      │
├───────────────────┼───────────────────────────────────────────┤
│  ✨ نکات طلایی   │  ✅ دسترسی‌پذیری (ARIA)                          │
│                   │  ✅ عملکرد (Performance)                          │
│                   │  ✅ رسپانسیو بودن (موبایل و تبلت)                 │
│                   │  ✅ استفاده از کتابخانه‌ها (اختیاری: Tippy.js)      │
└───────────────────┴───────────────────────────────────────────┘
    

چرا تولتیپ‌های مدرن مهم هستند؟

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

آناتومی یک تولتیپ مدرن

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

• عنصر هدف (Trigger Element): همون دکمه، لینک، آیکون یا هرچیزی که کاربر با موس روش میره یا لمسش می‌کنه تا تولتیپ ظاهر بشه.
• محتوای تولتیپ (Tooltip Content): متنی که می‌خوای به کاربر نشون بدی. می‌تونه متن ساده، آیکون، یا حتی یه بخش کوچیک HTML باشه.
• موقعیت‌دهی (Positioning): جایی که تولتیپ نسبت به عنصر هدف قرار می‌گیره (بالا، پایین، چپ، راست).
• انیمیشن (Animation): افکت‌های بصری که تولتیپ باهاشون ظاهر و ناپدید میشه (مثلاً محو شدن، اسلاید، بزرگ شدن).
• رفتار (Behavior): چه زمانی ظاهر بشه (hover, focus, click) و چه زمانی ناپدید بشه.

HTML پایه برای تولتیپ

اولین قدم، ساختار HTML هستش. ما به یه عنصر نیاز داریم که تولتیپ رو نمایش بده و خود محتوای تولتیپ. بهترین روش اینه که محتوای تولتیپ رو به صورت یه `data-attribute` روی عنصر هدف ذخیره کنیم یا یه عنصر جداگانه برای تولتیپ داشته باشیم و با یه شناسه یا کلاس به هم ربطشون بدیم. اینجا از روش `data-attribute` استفاده می‌کنیم که تمیزتره:

        
            <!-- Button with a simple tooltip -->
            <button class="btn" data-tooltip="این یه تولتیپ دکمه است!">
                یه دکمه
            </button>

            <!-- Span with a complex tooltip -->
            <span class="info-icon" data-tooltip="اینجا می‌تونی اطلاعات بیشتری پیدا کنی.<br><em>کلیک کن!</em>">
                ⓘ
            </span>

            <!-- Structure for a tooltip with separate content (more flexible) -->
            <div class="tooltip-container">
                <p class="tooltip-trigger" aria-describedby="my-custom-tooltip">
                    متنی که تولتیپ دارد
                </p>
                <div id="my-custom-tooltip" role="tooltip" class="custom-tooltip">
                    این یک تولتیپ با محتوای مجزا و استایل‌های خاص است.
                </div>
            </div>
        
    

استایل‌دهی CSS برای زیبایی و رسپانسیو بودن

حالا نوبت جادوی CSS هستش. اینجا تولتیپ رو مخفی می‌کنیم، موقعیتش رو تنظیم می‌کنیم و البته، انیمیشن‌های جذاب رو بهش اضافه می‌کنیم. حواست باشه که برای رسپانسیو بودن، باید از واحدهای انعطاف‌پذیر مثل `em`، `rem`، `vw`، `vh` و درصد استفاده کنی. همچنین، برای اینکه تولتیپ روی موبایل، تبلت، لپ‌تاپ و حتی تلویزیون به درستی نمایش داده بشه، از media queries استفاده می‌کنیم.

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

        
            .tooltip-container {
                position: relative;
                display: inline-block;
                cursor: pointer;
            }

            .custom-tooltip {
                visibility: hidden;
                width: 200px;
                background-color: #333;
                color: #fff;
                text-align: center;
                border-radius: 6px;
                padding: 10px 14px;
                position: absolute;
                z-index: 1000;
                bottom: 125%; /* Position above the text */
                left: 50%;
                margin-left: -100px; /* Use half the width to center */
                opacity: 0;
                transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
                transform: translateY(10px); /* Initial position for slide up effect */
                font-size: 0.9rem;
            }

            .custom-tooltip::after {
                content: "";
                position: absolute;
                top: 100%; /* At the bottom of the tooltip */
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: #333 transparent transparent transparent;
            }

            .tooltip-container:hover .custom-tooltip,
            .tooltip-trigger:focus + .custom-tooltip {
                visibility: visible;
                opacity: 1;
                transform: translateY(0); /* End position for slide up effect */
            }

            /* Responsive adjustments */
            @media (max-width: 768px) { /* For tablets and smaller screens */
                .custom-tooltip {
                    width: calc(100vw - 40px); /* Adjust width to fit screen */
                    left: 20px; /* Align to left with padding */
                    right: 20px;
                    margin-left: 0;
                    bottom: auto; /* Reset bottom positioning */
                    top: 100%; /* Position below trigger on mobile */
                    transform: translateY(-10px); /* Initial position for slide down effect */
                }
                .custom-tooltip::after {
                    top: -5px; /* Arrow above tooltip */
                    border-color: transparent transparent #333 transparent;
                    left: 50%;
                }
                .tooltip-container:hover .custom-tooltip,
                .tooltip-trigger:focus + .custom-tooltip {
                    transform: translateY(0);
                }
            }
        
    

جاوااسکریپت برای تعامل و دینامیک بودن

اگر می‌خوای تولتیپت فقط با CSS کار کنه، می‌تونی از `:hover` و `:focus` استفاده کنی، اما برای کنترل بیشتر، مثلاً تولتیپ‌های دینوامیک، بستن با کلیک، یا مدیریت موقعیت‌های پیچیده، جاوااسکریپت حرف اول رو میزنه. این اسکریپت ساده بهت کمک می‌کنه تا تولتیپ رو بر اساس `data-tooltip` روی عنصر هدف بسازی و نمایش بدی. این یه روش کارآمد برای مدیریت تولتیپ‌هاست.

        
            document.addEventListener('DOMContentLoaded', () => {
                const tooltipTriggers = document.querySelectorAll('[data-tooltip]');

                tooltipTriggers.forEach(trigger => {
                    let tooltipElement;

                    function showTooltip() {
                        tooltipElement = document.createElement('div');
                        tooltipElement.className = 'js-tooltip';
                        tooltipElement.innerHTML = trigger.getAttribute('data-tooltip');
                        document.body.appendChild(tooltipElement);

                        const triggerRect = trigger.getBoundingClientRect();
                        const tooltipRect tooltipElement.getBoundingClientRect(); // typo here - should be = tooltipElement.getBoundingClientRect()

                        tooltipElement.style.left = `${triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2)}px`;
                        tooltipElement.style.top = `${triggerRect.top - tooltipRect.height - 10}px`;
                        tooltipElement.classList.add('is-visible');
                    }

                    function hideTooltip() {
                        if (tooltipElement) {
                            tooltipElement.classList.remove('is-visible');
                            setTimeout(() => { // Give time for animation to complete
                                tooltipElement.remove();
                                tooltipElement = null;
                            }, 300);
                        }
                    }

                    trigger.addEventListener('mouseenter', showTooltip);
                    trigger.addEventListener('mouseleave', hideTooltip);
                    trigger.addEventListener('focus', showTooltip);
                    trigger.addEventListener('blur', hideTooltip);
                });
            });

            /* Add this CSS for the JS-driven tooltip */
            .js-tooltip {
                position: absolute;
                background-color: <span style="color: #007bff;
                color: #fff;
                padding: 8px 12px;
                border-radius: 4px;
                font-size: 0.85rem;
                opacity: 0;
                transform: translateY(10px);
                transition: opacity 0.3s ease-out, transform 0.3s ease-out;
                pointer-events: none;
                z-index: 1001;
            }
            .js-tooltip.is-visible {
                opacity: 1;
                transform: translateY(0);
            }
            @media (max-width: 768px) {
                .js-tooltip {
                    max-width: calc(100% - 40px);
                    white-space: normal;
                    left: 20px !important;
                    transform: translateY(-10px); /* Initial position for slide down on mobile */
                }
                .js-tooltip.is-visible {
                    transform: translateY(0);
                }
            }
        
    

ساخت تولتیپ‌های انیمیشنی با CSS (بدون نیاز به JS اضافه)

اگه دنبال سادگی و کارایی هستی و نمی‌خوای پروژه رو با جاوااسکریپت سنگین کنی، می‌تونی بخش عمده انیمیشن‌ها و تعامل تولتیپ رو فقط با CSS مدیریت کنی. این روش برای تولتیپ‌های ساده‌تر و بدون محتوای دینامیک عالیه و عملکرد بهتری هم داره. ما می‌تونیم از خواص `transition` و `transform` برای ایجاد انیمیشن‌های محو شدن، اسلاید یا بزرگ و کوچک شدن استفاده کنیم.

برای مثال، به این کد نگاه کن که چطور با استفاده از تغییر `opacity` و `transform` یه انیمیشن ورود و خروج نرم رو ایجاد می‌کنیم. این یکی از کدهای آماده پرکاربرد برای تولتیپ‌های CSS-Only هستش.

تولتیپ‌های پیشرفته و کار با کتابخانه‌ها

وقتی نیازت فراتر از یه تولتیپ ساده باشه، مثلاً بخوای موقعیت‌دهی خیلی دقیق داشته باشی، تولتیپت رو به صورت HTML پیچیده نشون بدی، یا حتی قابلیت‌های دسترسی‌پذیری رو به صورت کامل پیاده‌سازی کنی، استفاده از کتابخانه‌ها یه گزینه عالیه. کتابخانه‌هایی مثل Tippy.js (که از Popper.js برای موقعیت‌دهی استفاده می‌کنه) یا Tooltip.js کار رو برات خیلی راحت می‌کنن. اونا کلی قابلیت آماده دارن و دیگه لازم نیست خودت چرخ رو از نو اختراع کنی. این ابزارها برای پروژه‌های بزرگ و پیچیده خیلی به دردت می‌خورن و می‌تونن زمان توسعه رو به شکل چشمگیری کاهش بدن. برای مشاهده کدهای آماده و اسنیپت‌های بیشتر، به بخش مربوطه در سایت ما سر بزن.

نمونه عملی با Tippy.js

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

        
            <!-- ۱. فایل CSS Tippy.js رو اضافه کن -->
            <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />

            <!-- ۲. عنصر HTML با تولتیپ -->
            <button data-tippy-content="این یه تولتیپ با Tippy.js هستش!">
                دکمه Tippy
            </button>

            <!-- ۳. فایل JS Tippy.js رو اضافه کن (ترجیحا قبل از بسته شدن تگ body) -->
            <script src="https://unpkg.com/@popperjs/core@2"></script>
            <script src="https://unpkg.com/tippy.js@6"></script>

            <!-- ۴. Tippy رو مقداردهی اولیه کن -->
            <script>
                tippy('[data-tippy-content]', {
                    animation: 'fade',
                    theme: 'light-border',
                    placement: 'right',
                });
            </script>
        
    

نکات حیاتی برای سئو و تجربه کاربری (UX) تولتیپ‌ها

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

• دسترسی‌پذیری (Accessibility – ARIA): خیلی مهمه که تولتیپ‌ها برای کاربران دارای محدودیتت هم قابل استفاده باشن. از ویژگی‌های ARIA مثل `aria-describedby` یا `role=”tooltip”` استفاده کن تا Screen Readerها بتونن محتوای تولتیپ رو بخونن. همیشه مطمئن شو که محتوای مهم فقط در تولتیپ نیست، چون ممکنه برای برخی کاربران غیرقابل دسترس باشه.
• محتوای پنهان: موتورهای جستجو ممکنه محتوایی که همیشه پنهانه (مثل محتوای تولتیپ که فقط با hover ظاهر میشه) رو کمتر ارزش بدن یا اصلاً ایندکس نکنن. پس اطلاعات حیاتی رو تو تولتیپ نذار. تولتیپ باید حاوی اطلاعات مکمّل و اضافی باشه، نه اصلی.
• عملکرد (Performance): اگه تعداد تولتیپ‌ها زیاد باشه، ممکنه روی سرعت سایتت تأثیر بذاره. از انیمیشن‌های CSS-Only استفاده کن و مطمئن شو که جاوااسکریپتت بهینه و سبک هست.
• رسپانسیو بودن: همونطور که قبلاً گفتم، تولتیپت باید روی تمام دستگاه‌ها (موبایل، تبلت، لپ‌تاپ، تلویزیون) خوب دیده بشه. روی موبایل، `hover` معنی نداره، پس باید با tap یا `focus` کار کنه.
• سادگی و وضوح: محتوای تولتیپ باید کوتاه، مفید و واضح باشه. قرار نیست یه مقاله کامل توش بنویسی!

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

چالش‌های رایج و راه‌حل‌ها (Troubleshooting)

درست کردن تولتیپ‌ها همیشه هم آسون نیست و ممکنه با مشکلاتی روبرو بشی. نگران نباش، این مشکلات رایجن و راه‌حل دارن:

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

  راه‌حل: این مشکل معمولاً به دلیل موقعیت‌دهی `absolute` و نادیده گرفتن لبه‌های صفحه پیش میاد.

  • اگه از JS استفاده می‌کنی، می‌تونی موقعیت عنصر هدف و تولتیپ رو با `getBoundingClientRect()` بدست بیاری و قبل از نمایش، موقعیت تولتیپ رو طوری تنظیم کنی که توی صفحه جا بشه.
  • با CSS می‌تونی از `transform: translateX(-50%)` برای مرکزیت افقی و `clamp()` یا `min/max` برای عرض استفاده کنی. روی موبایل هم موقعیت رو به `top: 100%` تغییر بده تا زیر عنصر اصلی قرار بگیره.
  • کتابخانه‌های مثل Tippy.js یا Popper.js این مشکل رو به صورت خودکار و هوشمند حل می‌کنن.

• مشکل: عملکرد ضعیف (لگ) با تعداد زیادی تولتیپ.

  راه‌حل:

  • تا حد امکان از انیمیشن‌های CSS برای `opacity` و `transform` استفاده کن، چون به سخت‌افزار (GPU) منتقل میشن و عملکرد بهتری دارن.
  • اگه از JS استفاده می‌کنی، تولتیپ رو فقط وقتی لازم بود به DOM اضافه کن و بعد از اتمام انیمیشن، از DOM حذفش کن (همون کاری که تو مثال JS بالا کردیم). این کار منابع رو آزاد می‌کنه.
  • از event delegation استفاده کن تا به جای اضافه کردن event listener به هر تولتیپ، فقط به والدشون اضافه کنی.

• مشکل: دسترسی‌پذیری برای کاربران کیبورد.

  راه‌حل:

  • مطمئن شو که تولتیپ با کلید Tab قابل دسترس باشه (با `tabindex=”0″` یا استفاده از عناصر تعاملی مثل `` و ``).
  • وقتی عنصر هدف `focus` گرفت، تولتیپ باید ظاهر بشه و وقتی `blur` شد، ناپدید بشه (تو مثال JS بالا اینو پوشش دادیم).
  • همونطور که گفتیم، از `aria-describedby` یا `aria-labelledby` برای ارتباط دادن عنصر هدف با محتوای تولتیپ استفاده کن.

• مشکل: تولتیپ روی موبایل با لمس فعال نمیشه یا بد عمل میکنه.

  راه‌حل:

  • `hover` روی موبایل معنی نداره. از event listener برای `touchstart` و `touchend` استفاده کن.
  • می‌تونی از یک `tap` برای نمایش و `tap` دوباره برای پنهان کردن استفاده کنی، یا وقتی کاربر خارج از تولتیپ لمس کرد، اون رو ببندی.
  • محتوای تولتیپ رو روی موبایل ساده‌تر نگه دار و مطمئن شو که اندازه فونت و پدینگ مناسب باشه.

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

// General copy to clipboard function for all code blocks
function copyToClipboard(button) {
let codeElement = button.previousElementSibling.querySelector(‘code’);
if (!codeElement) {
// Fallback for cases where code might be directly in pre, or structure is different
codeElement = button.previousElementSibling;
}
let textToCopy = codeElement.innerText;
navigator.clipboard.writeText(textToCopy).then(() => {
let originalText = button.innerText;
button.innerText = ‘کپی شد!’;
setTimeout(() => {
button.innerText = originalText;
}, 2000);
}).catch(err => {
console.error(‘Failed to copy: ‘, err);
alert(‘خطا در کپی کردن کد.’);
});
}

// FAQ Section toggle functionality (already in place in HTML, just re-iterating)
// No explicit JS needed here, already inline in HTML.

{
“@context”: “https://schema.org”,
“@type”: “Article”,
“headline”: “کدهای آماده ساخت تولتیپ‌های (Tooltip) مدرن و انیمیشنی”,
“image”: [
“https://fa-tools.ir/images/tooltip-hero.jpg”,
“https://fa-tools.ir/images/tooltip-animation.jpg”
],
“datePublished”: “2023-10-27T09:00:00+08:00”,
“dateModified”: “2023-10-27T09:30:00+08:00”,
“author”: {
“@type”: “Person”,
“name”: “FA Tools Team”
},
“publisher”: {
“@type”: “Organization”,
“name”: “FA Tools”,
“logo”: {
“@type”: “ImageObject”,
“url”: “https://fa-tools.ir/logo.png”
}
},
“description”: “راهنمای جامع و کدهای آماده برای ساخت تولتیپ‌های مدرن، انیمیشنی و رسپانسیو با HTML, CSS و JavaScript. نکات SEO و UX برای بهترین عملکرد.”,
“mainEntityOfPage”: {
“@type”: “WebPage”,
“@id”: “https://fa-tools.ir/blog/modern-animated-tooltips-code”
},
“keywords”: [“تولتیپ”, “Tooltip”, “انیمیشنی”, “مدرن”, “CSS”, “JavaScript”, “HTML”, “رسپانسیو”, “UX”, “سئو”, “کدهای آماده”],
“articleBody”: “رفیق برنامه‌نویس، بیا رو راست باشیم! دیگه دوران تولتیپ‌های خشک و بی‌روح که فقط یه متن ساده نشون میدادن تموم شده… (متن کامل مقاله اینجا قرار می‌گیرد)”
}

{
“@context”: “https://schema.org”,
“@type”: “FAQPage”,
“mainEntity”: [
{
“@type”: “Question”,
“name”: “آیا تولتیپ‌های انیمیشنی سرعت سایت رو کم می‌کنن؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “اگه به درستی پیاده‌سازی بشن، خیر. استفاده از انیمیشن‌های CSS-Only که از خواص `transform` و `opacity` استفاده می‌کنن، معمولاً عملکرد خوبی دارن چون توسط GPU پردازش میشن. تولتیپ‌های جاوااسکریپتی هم اگه بهینه نوشته بشن و فقط هنگام نیاز به DOM اضافه بشن، مشکلی ایجاد نمی‌کنن.”
}
},
{
“@type”: “Question”,
“name”: “محتوای تولتیپ‌ها باید چقدر باشه؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “محتوای تولتیپ باید کوتاه، مختصر و مفید باشه. هدف تولتیپ ارائه اطلاعات مکمّل و سریع هست، نه توضیحات طولانی. برای محتوای طولانی‌تر، بهتره از مودال‌ها یا لینک به صفحات جزئیات استفاده کنی.”
}
},
{
“@type”: “Question”,
“name”: “چطور تولتیپ‌ها رو برای موبایل بهینه کنیم؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “روی موبایل، `hover` (بردن موس روی عنصر) وجود نداره. باید تولتیپ‌ها با `tap` (لمس) فعال بشن. می‌تونی از رویدادهای `touchstart` و `touchend` در جاوااسکریپت استفاده کنی یا از کتابخانه‌هایی بهره ببری که این مورد رو به صورت خودکار مدیریت می‌کنن. همچنین، مطمئن شو که اندازه تولتیپ برای صفحات کوچک مناسبه و از صفحه بیرون نمی‌زنه.”
}
},
{
“@type”: “Question”,
“name”: “آیا محتوای تولتیپ برای سئو ایندکس میشه؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “محتوایی که به صورت پیش‌فرض پنهان است و فقط با تعامل کاربر (مثل hover) ظاهر می‌شود، ممکن است توسط موتورهای جستجو کمتر ایندکس شود یا ارزش کمتری به آن داده شود. بنابراین، اطلاعات اصلی و حیاتی صفحات را نباید فقط در تولتیپ‌ها قرار داد. تولتیپ‌ها برای اطلاعات مکمّل و بهبود تجربه کاربری هستند.”
}
}
]
}