چند وقتی هست که مشغول مطالعه کتاب javascript and jquery interactive front-end web development هستم. تا اینجا که هم چی عالی بوده و واقعا این کتاب به نظرم برای یادگیری جاوااسکریپت محشره. بعد از خوندن چند فصل از کتاب، تصمیم گرفتم یه Form Validation درست کنم (پروژه‌ی عملی / در حد مبتدی و سطح خودم)؛ بنابراین از دیروز شروع کردم مقدمات کار رو انجام دادن. (کارهای HTML و CSS)
به ذهنم رسید که یه tooltip هم برای نمایش یکسری اطلاعات، قرار بدم که به کاربر یکسری توضیحات رو نمایش بده. (با رفتن موس بر روی علامت سوال). خوب طبیعتاً برای جای‌گذاریش در صفحه ناچار هستیم از خاصیت Position در CSS استفاده کنیم، که اینکار رو هم انجام دادم و این شد ماحصل کار:
مشکلی که الان وجود داره، اینه که اگه متن tooltip افزایش یا کاهش پیدا کنه، باید مجدد جای‌گذاری tooltip محاسبه و تنظیم بشه. (خاصیت left)
این کدها: (چون ویرگول کدها رو اشتباه نمایش می‌داد، عکس گذاشتم)
و اینم خروجی و مشکل ایجاد شده:
راهکارهایی که به ذهنم رسید این بود:
1) به tooltip یه عرض ثابت و همیشگی بدم، که زیاد جالب‌ناک نمی‌شه. چون بعضی مواقع لازم هست که عرض tooltip کم باشه، که طبیعتاً زیبایی کار رو خراب می‌کنه.
2) راه حل دوم استفاده از جاوااسکریپت هست. به این صورت که عرض tooltip رو با جاوااسکریپت بگیرم و پوزیشن‌ها رو بر اساس عرض به‌دست‌آمده مجدد محاسبه و تنظیم کنم. چون کلا راه‌کارها و حقّه‌های CSS برام جذاب هست، نتیجتاً این کار رو هم نکردم.
3) راه حل سوم استفاده از کتاب‌خونه‌های مختلف هست که tooltip رو خیلی شیک و مجلسی پیاده سازی کردن و البته اون هم به طور معمول با استفاده از جاوااسکریپت هستش.
4) راه حل چهارمی که به نظرم رسید و می‌خوام پیاده‌سازیش کنم، استفاده از یک div نگه‌دارنده هست که به این صورت تمام tooltip در یک div نگه‌دارنده قرار می‌گیره که غیر از خاصیت Position هیچ خاصیت CSS دیگه مثل بک‌گراند نداشته باشه. همچنین برای اون div یک عرض حداکثری تعیین کنم تا بیشتر از اون نشه ( یعنی max-width) و به اولین فرزندش خاصیت display: inline-block رو تعیین کنم تا تمام عرض والد خودش رو در حالت پیش‌فرض نگیره و به مقدار مورد نیاز فضا اِشغال کنه.
بیایید این روش رو باهم پیاده سازی کنیم، خوب کدهام رو دیدید، با یک تغییرات جزئی کدها به صورت زیر تبدیل می‌کنم:
اینم خروجی:
این هم لینک کدها:
https://codepen.io/MR-Mostafa/pen/oOLONR
در پایان این رو هم یادآوری کنم که قطعا روش‌های دیگه‌ای هم برای اینکار وجود داره که نیاز به کمکی تمرکز و فکر کردن داره.
این فقط بخش شروع هست و قطعا برای ادامه‌ی ماجرا نیاز به جاوااسکریپت هست که اونو هنوز انجام ندادم.
متوجه نشدم چرا ویرگول کدها رو جدا کرد و خراب نشون می‌ده؟! @virgool
به همین خاطر، کدها رو به صورت عکس قرار دادم.
