اضافه کردن یک تول‌تیپ ساده به وبسایت کار چندان سختی نیست، می توانید در اینترنت مجموعه بسیار زیادی از قطعه کدها و پلاگین‌های ساده جاوااسکریپت را ببینید که با آن‌ها میتوانید چنین چیزی را ایجاد کنید.
اما استفاده از سی‌اس‌اس به صورت خالص چیز دیگری است، این گزینه در حال حاضر توسط طراحان وب بسیاری استفاده می شود. اگر دنبال تول‌تیپ‌های ایجاد شده با سی‌اس‌اس می گردید پس حتما این مجموعه برای شما بسیار مفید خواهد بود.
تمام این کدها از وبسایت CodePen گرفته شده، پس شما آزاد هستید که آن‌ها را کپی کنید، تغییر دهید و … .
1. Product Feature Highlights
مورد اولی که بررسی خواهیم کرد توسط توسعه دهنده Ian Farb ایجاد شده و علاوه بر آنکه ساده است بسیار باورنکردنی نیز هست. این مورد بسیار منحصر به فرد است و چیزی است که شما هر روز آن را نمی بینید.
با اعمال کردن یکسری تول‌تیپ به المنت Div شما میتوانید پوزیشن یا موقعیت آن را براساس چیزی که می‌خواهید تنظیم کنید. این راهی است که با آن کاربر می تواند روی قسمت مربوطه هاور کند و اطلاعات مربوط به آن قسمت -موقعیت- را مشاهده کند.
این تول‌تیپ بسیار ظاهر مرتبی دارد و تنها از یک پس زمینه سفید و یک سایه بسیار کوچک بهره می برد. این افزونه با هر لایه بندی به خوبی کار می کند.
2. Animated CSS Tooltips
دنبال یک انیمیشن سفارشی روی تول‌تیپ‌ها می گردید؟ پس مطمئنا نیاز دارید تا این مورد را بررسی کنید.
این مورد با سه انیمیشن مختلف و متفاوت عرضه شده که شامل حالت‌های fading، expanding و swing می شود.
اضافه کردن تک تک این موارد به صفحه‌های‌تان واقعا ساده است و کافی‌ست به متون‌تان خاصیت data-title را اضافه نمایید. این موضوع بدان معناست که نیاز ندارید تا از المان‌های اچ‌تی‌ام‌ال اضافی استفاده کنید.
حتی می توانید در این موارد پوسته سی‌اس‌اس آن را دریافت کنید و انیمیشن‌های آن را سفارشی سازی نمایید.
3. Automation Tooltips
با دیدن این تول‌تیپ مشاهده خواهید کرد که این مورد برای استفاده در لینک‌ها واقعا عالی است و از طرف دیگر از جاوااسکریپت می‌کند.
درست است که تمام از سی‌اس‌اس استفاده نکرده اما من در این لیست آن را قرار داده‌ام به این دلیل که واقعا سودمند و کاربردی است. ممکن است که این طرح در تمام وبسایت‌ها درست نمایش داده نشود، به همین دلیل نوع خاصی از وبسایت و لایه بندی را می طلبد تا بتواند در محتوا به خوبی نمایش داده شود.
در هر جهت طراحی آن واقعا عالی است و قطعه کد به خوبی اجرا می شود.
سی‌اس‌اس مربوط به این پروژه از Sass استفاده می کند و اچ‌تی‌ام‌ال آن نیز براساس Pug اجرا می شود، در هر حال شما می توانید هر دوی این موارد را به حالت عادی کامپایل کرده و بعد داخل وبسایت‌تان قرار دهید.
4. Animated Question
من اغلب در کنار صفحات پیچیده و یا فرم‌های طولانی و پر جزئیات علامت سوال کوچکی را مشاهده می کنم. این مورد برای جلب کردن توجه کاربر و دادن اطلاعات مهم در رابطه با فرم یا بخشی از برگه برای کاربر بسیار مهم است.
برای این کار می توانید از این قطعه کد استفاده کنید که با استفاده از سی‌اس‌اس ساخته شده است. این مورد از انیمیشن سفارشی بهره می برد که با هاور کردن ماوس روی آن کار می کند.
برای کار کردن با آن نیاز دارید تا به متن‌های‌تان خاصیت data-* اچ‌تی‌ام‌ال۵ را اضافه نمایید. با این وجود که سورس به صورت کامل باز و رایگان است پس می توانید حتی از طریق سی‌اس‌اس طرح رنگی را تغییر دهید و یا انیمیشن سفارشی بسازید.
5. Quick Tips in Pure CSS3
احساس می کنم که استفاده از این قطعه کد در هر وبسایت به درستی کار خواهد کرد و به درستی اجرا خواهد شد.
این مورد براساس سی‌اس‌اس خالص اجرا می شود و شخصی سازی آن بسیار ساده خواهد بود.
به صورت پیشفرض هرکدام از تول‌تیپ‌ها از یک پس‌زمینه سیاه همراه با opacity بسیار کمی بهره مند است. این مورد در حالتی که پاراگراف‌های مختلفی نوشته‌اید و تول‌تیپ روی پاراگراف بالایی می افتد ممکن است کمی خواندن را سخت کند، اما تنها با کمی تغییر همه چیز درست می شود.
می توانید در این مورد از تصاویر نیز استفاده کنید.
6. No-JS Tooltips
این مورد نیز کاملا براساس سی‌اس‌اس نوشته شده است. این مورد از انیمیشن خاصی استفاده نمی کند پس شاید در مقایسه با بقیه موارد کمی خشک به نظر برسد.
مهمترین ویژگی آن سازگاری کامل با تمام مرورگرها و کار کردن درست در آن جهتی که شما می‌خواهید، است.
برخی اوقات واقعا شاید بخواهید که انیمیشن‌ها را حذف کنید، شاید بیشتر دنبال جدی بودن در دادن اطلاعات باشید تا در مورد فان بودن و … .
7. Animated Button with Tooltip
این مورد از دکمه انیمیشنی زیبایی استفاده می کند که باعث شده بسیار منحصر به فرد باشد. وقتی که ماوس را روی آن هاور می کنید موارد از بالا و پایین نمایش داده می شوند.
توسعه دهنده این کار سعی کرده از خاصیت‌های سی‌اس‌اس استفاده کند که بیشترین سازگاری را با مرورگر‌های امروزی دارند. این مورد روی هر لینک و دکمه‌ای با کلاس .button و شبه کلاس‌های :before و :after کار می کند.
وقتی که می خواهید از دکمه‌های دانلود یا ثبت نام در وبسایت استفاده کنید، چنین موردی را به خاطر داشته باشید.
8. Pure CSS Tips in Text
من یکی از طرفدارهای تول‌تیپ‌های روی متن هستم، البته با وجود آنکه سنتی هستند، هنوز دوست داشتنی‌اند. با این مورد که کاملا از سی‌اس‌اس استفاده می کند شما رابط کاربری تمیز و زیبا همراه با انیمیشن بسیار جالبی خواهید داشت.
وقتی تول‌تیپ ظاهر می شود همراه با یک تاخیر نمایش می‌یابد که می توانید آن را نیز تغییر دهید. وقتی ماوس را روی متنی می‌برید، اشاره‌گر ماوس شما به شکل یک علامت سوال تغییر می‌کند.
استفاده و پیاده سازی این مورد بسیار ساده و لذت‌بخش است.
9. Information Tooltip
این مورد نیز یکی دیگر از تول‌تیپ‌های اطلاعی است که از آیکون "i” استفاده می‌کند. می توانید به سادگی کدهای این مورد را کپی کنید و در پروژه خود استفاده نمایید.
انیمیشن استفاده شده در این طرح واقعا ساده و زیباست، البته ظاهر شدن آن نیز کمی همراه با تاخیر و آهستگی است. از آنجایی که به استایل پروژه دسترسی دارید پس به راحتی می توانید سرعت و موارد دیگر آن را تغییر دهید.
این مورد برای رسم آیکون از SVG استفاده می کند.
10. Donut Chart with Tooltips
چارت‌های داده همیشه همراه با تول‌تیپ‌ها بهتر کار می‌کنند. از این طریق می توانید اطلاعات بیشتری در رابطه با بخشی از چارت بدهید و دیگر احتیاجی به اضافه کردن برگه جدیدی نیست.
در این مورد می توانید چارت داده‌ای را مشاهده کنید که همراه با یکسری تول‌تیپ‌های ساده است. این مورد کمی همراه با جاوااسکریپت است که آن نیز به تول‌تیپ مربوط نمی شود.
با دقت به تمام موارد آورده شده در این لیست نگاه کنید، ممکن است موردی که می‌خواهید در همین بین باشد در غیر اینصورت برای مشاهده موارد بیشتر می توانید این صفحه را بررسی کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید