مجاني · التصميم وCSS
مختبر CSS anchor positioning.
ضع التلميحات والقوائم والنوافذ المنبثقة بجانب زر باستخدام CSS فقط عبر anchor positioning: الجهة والمسافة والبديل، مع معاينة حية.
Loading the calculator…
طريقة الاستخدام: مختبر CSS anchor positioning
أدخل بياناتك أو اختر الملف. عدّل الخيارات ثم أنشئ النتيجة وراجعها قبل النسخ أو التنزيل.
الحدود والصيغ المدعومة
تُعالج بياناتك على جهازك.
ملاحظات تقنية بالإنجليزية
Needs a browser with anchor positioning (all major browsers since 2026). Everything is calculated in your browser; nothing you type is uploaded.
anchor-name marks the button, position-anchor ties the tooltip to it, position-area chooses the side and position-try-fallbacks switches sides when the tooltip would overflow.
position-area: top with a flip-block fallback keeps a tooltip above its button and moves it below when there is no room.