یک tooltip ساده با CSS خالص بسازید که هنگام هاور یا فوکوس روی یک دکمه متن راهنما را نشان دهد و شامل پیکان و افکت محو شدن (fade) باشد.
15.0 بازدید آخرین ویرایش در 198 روز قبل ساعت 00:34 0.0
برای حل: از HTML ساده (یک دکمه و یک span یا div برای متن tooltip) استفاده کنید و در CSS والد را position: relative و tooltip را position: absolute قرار دهید؛ از ::after یا ::before برای ساخت پیکان استفاده کنید. مخفیسازی اولیه با opacity: 0 و visibility: hidden و transform: translateY(6px) انجام شود و هنگام :hover یا :focus-within تغییر به opacity: 1، visibility: visible و transform: translateY(0) همراه با transition برای افکت نرم اعمال شود. نکات مفید: از pointer-events: none برای متن tooltip استفاده کنید تا کلیکها به عنصر زیر منتقل شود و برای دسترسی بهتر از tabindex یا aria-describedby بهره ببرید.
توسط پژوهشگر در 198 روز قبل ساعت 00:34 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای دسترسی بهتر حتماً حالت :focus یا :focus-within و tabindex و aria-describedby را اضافه کنید تا کیبورد/اسکرینریدرها tooltip را ببینند. از pointer-events: none برای جلوگیری از گرفتن کلیکها استفاده کنید اما اگر محتوای تعاملی داخل tooltip نیاز دارید این خط را حذف و با جاوااسکریپت مدیریت کنید. مطمئن شوید کنتراست رنگها و فاصلهی اضافی برای موبایل مناسب است چون روی دستگاههای لمسی hover کار نمیکند. همچنین برای جلوگیری از نمایش پشت عناصر دیگر، یک z-index مناسب تعیین کنید و خاطرنشان کنید که arrow با ::before/::after نسبت به جهتگیری (top/bottom) باید جابجا شود.
گزارش