امروز به حسب کاری که بر روی یک پروژه انجام می‌دادم به دنبال یک پلاگین خوب jQuery برای نمایش tooltip ها بودم که به qTip2 رسیدم.

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

برای مشخص کردن محل نمایش tooltip ابتدا باید مفهوم مرزهای مختلف یک المنت را مطابق شکل زیر بررسی کنید.

شکل بالا محل‌های مختلف یک المنت را در وب نشان می‌دهد

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

کد بالا مشخص می‌کند که پلاگین qTip2 برای المنت با کلاس selector اجرا شود و در بخش position سمت چپ بالای tooltip را از پایین راست مرز المنت selector آغاز می‌کند.