Tooltip
ساخت tooltip با CSS.
نسخهٔ نمایشی: مثالهای Tooltip
یک tooltip (راهنمای ابزار) اغلب برای مشخص کردن اطلاعات اضافی درمورد چیزی، در هنگام قرار گرفتن اشاره گر ماوس روی یک عنصر استفاده میشود:[۱]
Tooltip پایه
ساخت یک tooltip که هنگام قرار گرفتن نشانه گر ماوس روی یک عنصر توسط کاربر نمایش داده میشود:
توضیح مثال
HTML: استفاده از یک عنصر نگه دارنده (مانند <div>) و اضافهکردن کلاس "tooltip"
به آن. هنگامی که کاربر نشانهگر ماوس را روی این <div> میبرد، متن tooltip نمایش داده خواهد شد.
متن tooltip درون یک عنصر درون خطی (به انگلیسی: inline) (مانند <span>) با class="tooltiptext"
قرار میگیرد.
CSS: کلاس tooltip
از position:relative
استفاده میکند، که برای موقعیت دهی متن Tooltip مورد نیاز است. (position:absolute
). نکته: مثالهای زیر را درمورد موقعیت دهی tooltip ببینید.
کلاس tooltiptext
متن فعلی tooltip را نگهداری میکند. این کلاس به طور پیش فرض پنهان است، و هنگام hover شدن نمایان خواهد شد. همچنین تعدادی استایلهای پایه به آن اضافه کردهایم: ۱۲۰ پیکسل عرض، رنگ پس زمینه مشکی، رنگ متن سفید، وسط چین و padding از سمت بالا و پایین به اندازه 5 پیکسل.
ویژگی border-radius
برای اضافهکردن گوشههای گرد به متن tooltip استفاده میشود.
انتخابگر :hover
برای نمایش متن Tooltip هنگامی که کاربر نشانهگر موس را روی عنصر <div> با class="tooltip"
میبرد استفاده میشود.
موقعیت دهی به Tooltip
این بخش از مقاله: ، دقیق، کامل و صحیح ترجمه نشده است یا مشکل نگارش فارسی دارد لطفاً این ترجمه را با توجه به نسخهٔ اصلی اصلاح کنید و سپس این الگو را بردارید. |
[[رده:]]
در این مثال، tooltip در سمت راست (left:105%
) متن (<div>) قرار گرفتهاست. همچنین توجه داشته باشید که top:-5px
نیز برای موقعیت دهی آن در وسط عنصر نگهدارنده استفاده می شود. از عدد ۵ استفاده کردیم زیرا متن tooltip دارای padding به اندازه 5px از سمت بالا و پایین است. اگر میزان padding آن را افزایش دادید، مقدار ویژگی top
را نیز افزایش دهید تا مطمئن شوید که کنترل در وسط باقی میماند (اگر این را میخواهید). اگر میخواهید که tooltip در سمت چپ قرار گیرد، همین کار برای آن نیز صدق میکند.
اگر میخواهید Tooltip در بالا یا پایین نمایش داده شود، مثال های زیر را ببینید. توجه داشته باشید که ما از ویژگی margin-left
با مقدار ۶۰- پیکسل استفاده میکنیم. این کار برای قرار دادن tooltip در وسط جهت بالا / پایین متن قابل hover است. این مقدار برابر با نصف عرض tooltip تنظیم میشود (120/2 = 60).
فلش های Tooltip
برای ساخت یک فلش (Arrow) که میبایست در جهت خاصی از tooltip ظاهر شود، بعد از tooltip محتوای «خالی» با شبه کلاس ::after
به همراه ویژگی content
اضافه کنید. فلش، خود با استفاده از borderها ساخته میشود. این امر موجب میشود تا tooltip همانند یک کادر گفتگو نمایش داده شود.
این مثال نحوه اضافهکردن یک فلش به پایین یک tooltip را نمایش میدهد:
توضیح مثال
موقعیت دهی فلش درون tooltip: top: 100%
موجب قرارگیری فلش در پایین tooltip میشود. left: 50%
موجب قرارگیری پیکان در وسط میشود.
نکته: ویژگی border-width
اندازه پیکان را مشخص میکند. اگر شما این مقدار را تغییر دهید، میبایست مقدار margin-left
را هم تغییر دهید تا برابر باشند. این امر موجب قرارگیری پیکان در وسط میشود.
ویژگی border-color
برای تبدیل (Transform) محتوای درون یک پیکان استفاده میشود. کادر بالایی را مشکی، و سایر را نیز شفاف میکنیم. اگر همه جهات مشکی بودند، با یک مربع مشکی مواجه میشدید.
این مثال نحوه اضافهکردن یک فلش به بالای tooltip را نشان میدهد. توجه کنید که این بار رنگ کادر پایین را تنظیم میکنیم:
این مثال نحوه اضافهکردن یک فلش به سمت چپ tooltip را نمایش میدهد:
این مثال نحوه اضافهکردن یک فلش به سمت راست یک tooltip نشان میدهد:
Tooltipهای ظاهر شونده (Fade In) (انیمیشن)
اگر میخواهید متن tooltip زمانی که در حال نمایان شدن است به به آرامی ظاهر شود، میتوانید از ویژگی transition
به همراه ویژگی opacity
در CSS استفاده کنید و در مدت زمان معینی از ثانیه (۱ ثانیه در مثال)، از حالت تمام پنهان به حالت ۱۰۰٪ قابل رویت بروید:
منابع آموزشی