ابزار تولیدکننده Tooltip با CSS خالص
بدون نیاز به کتابخانه‌های سنگین جاوااسکریپت، تولتیپ‌های جذاب، واکنش‌گرا و سبک بسازید. کافیست استایل‌ها را شخصی‌سازی کرده و کدهای HTML و CSS را در پروژه خود کپی کنید.
مزایای Tooltip با CSS خالص
سرعت و عملکرد بالا
عدم استفاده از جاوااسکریپت (JS) یعنی مرورگر نیازی به پردازش اسکریپت‌های اضافه ندارد، که باعث افزایش سرعت بارگذاری سایت می‌شود.
بسیار سبک (Lightweight)
تمام افکت نمایش و پنهان شدن تولتیپ تنها با چند خط کد ساده با استفاده از شبه-المان‌های ::before و ::after انجام می‌شود.
شخصی‌سازی آسان
کدهای خروجی کاملاً خوانا هستند و می‌توانید در فایل CSS خود استایل‌هایی مثل فونت، انیمیشن یا سایه را به راحتی تغییر دهید.
راهنمای استفاده از کد
تنظیم ظاهر تولتیپ
متن، جهت نمایش و رنگ‌ها را در بخش تنظیمات ابزار انتخاب کنید. پیش‌نمایش در همان لحظه بروزرسانی می‌شود.
قرار دادن HTML
کد HTML تولید شده را کپی کرده و در هر کجای قالب سایت خود (بین تگ‌های بدنه) که می‌خواهید المان نمایش داده شود، قرار دهید.
اضافه کردن استایل CSS
کد CSS خروجی را در فایل استایل سایت خود (مثلاً style.css) یا در بخش CSS سفارشی قالب خود قرار دهید تا تولتیپ فعال شود.
سوالات متداول (FAQ)
خیر. از آنجایی که این یک تولتیپ کاملاً CSS محور است، محتوای آن از طریق خصوصیت data-tooltip و ویژگی content: attr() خوانده می‌شود که تنها از متن ساده (Plain Text) پشتیبانی می‌کند. برای تولتیپ‌های حاوی مدیا، باید از جاوااسکریپت استفاده کنید.
این مشکل مربوط به ویژگی z-index در CSS است. در کدهای تولید شده، ما مقدار بالایی (زِد-ایندکس ۱۰) برای تولتیپ در نظر گرفته‌ایم. اگر همچنان زیر المان دیگری (مثل هدر) می‌رود، عدد z-index: 10; را در کد CSS به یک عدد بزرگتر (مثلاً 9999) تغییر دهید.
تولتیپ‌های CSS مبتنی بر حالت :hover (رفتن موس روی المان) هستند. در دستگاه‌های لمسی (موبایل و تبلت)، با لمس کردن (Tap) روی المان، تولتیپ ظاهر می‌شود. اما توصیه می‌شود برای تجربه کاربری بهتر در موبایل، اطلاعات حیاتی را درون تولتیپ پنهان نکنید.