نمایش نکته Tooltip
در محیط وب و مخصوصا فرمها، نمایش نکات توضیحی برای موضوعی استفاده زیاد دارد، برای مثال یک برچسب بعنوان نام تنظیم شده است، با قرار گرفتن نشانه گر مویس بر روی آن توضیح اضافی در این خصوص میدهد، برای مثال نام کوچک.
برای نمایش انواع مختلف به مثالهای زیر توجه کنید.
انواع و جهت های اشاره گر
در زیر انواع نمایش نکته ها به همراه جهت نمایش اشاره گر آورده شده است که بر اساس نوع انتخاب میتوانید، تنظیم کنید.
برای ساخت یک الگو برای نمایش نکته یک div با کلاس
اگر میخواهید نکته شما فلش داشته باشد، بر اساس جهت فلش یکی از کلاسهای مرتبط را اضافه کنید،
برای پایین
برای بالا
برای شروع
برای انتها
اگر میخواهید نشانگر وسط نباشد یا ابتدای کادر یا انتهای کادر باشد، یکی از موارد زیر را نیز علاوه بر جهت گفته شده اضافه کنید.
برای ابتدا افقی
برای انتهای افقی
برای ابتدا عمودی
برای انتهای عمودی
LTR
RTL
نمایش پیش رفته
اگر میخواهید اطلاعات بیشتری نمایش دهید، یا موارد خاص در آن داشته باشید، میتوانید از چند بخش زیر استفاده کنید.
برای عنوان، یک div با کلاس
برای پانوشت، یک div با کلاس
اگر از عنوان یا پنوشت استفاده کردید، برای درج اطلاعات در بدنه، یک div با کلاس
توجه داشته باشید ترتیب اضافه کردن عنوان، بدنه، پانوشت رعایت شود.
LTR
RTL
سیستم رنگ بندی و اندازه
این موضوع نیز همانند بقیه موضوعات از سیستم رنگ و اندازه پشتیبانی میکند.
LTR
RTL
نحوه استفاده
برای نسبت دادن نکته به موضوعی، دو راه است که در زیر به آنها اشاره میکنیم.
نمایش متن
برای نمایش یک متن، کافیست بر روی موضوع مورد نظر، یک خصوصیت به اسم
اگر میخواهید، کمی شکل و شمایل را تغییر دهید، میتوانید از خصوصیت
نمایش الگو
برای نمایش یک الگو، کافیست بر روی موضوع مورد نظر، یک خصوصیت به اسم
تنظیمات
wn-tooltip-events
اگر میخواهید در رخداد خاصی، نمایش نکته فعال شود، آن رخداد ها را با جدا کردن
wn-tooltip-events-lost
زمانیکه به صورت دستی، مشخص کردید، در چه رخدادهایی نکته نمایش داده شود، باید در این خصوصیت نیز مشخص کنید، در چه رخدادهایی
نکته مخفی گردد. برای همین منظور رخدادها را مانند خصوصیت قبلی معرفی کنید.
در صورتیکه طی دو خصوصیت بالا، شما هیچ رخدادی را مشخص نکردید، سیستم به طور خودکار، مقدار
wn-tooltip-nolost
اگر میخواهید به صورت پیش فرض مقدار
wn-tooltip-delay
بعد از رخداد نمایش، زمانی صبر میکند و سپس نکته نمایش داده میشود، این زمان به صورت پیش فرض 500 میلی ثانیه است، اگر میخواهید این زمان را تغییر دهید،
آنرا در این خصوصیت و به میلی ثانیه وارد کنید.
wn-tooltip-hideafter
پس از آنکه نکته نمایش داده شد، 3000 میلی ثانیه یا 3 ثانیه صبر میکند و سپس نکته را مخفی میکند،
اگر میخواهید این زمان را تغییر دهید، آنرا در این خصوصیت و به میلی ثانیه وارد کنید. توجه داشته باشید، مقدار صفر به معنی عدم مخفی کردن است.
LTR
RTL
مثال پیشرفته
LTR
RTL
جاوا اسکریپت
شما میتوانید با استفاده از فراخوان های جاوا اسکریپت، این نکته ها را نمایش یا مخفی کنید.
توابع زیر به شما کمک میکنند تا در امر خود موفق شوید.
delay
تنظیم این خصوصیت، باعث تنظیم دیر نمایش دادن نکته در زمان اتفاق رخداد نمایش میشود.
hideafter
تنظیم این خصوصیت، زمان مخفی شدن خودکار پس از نمایش نکته را به شما میدهد.
tooltipclass
تنظیم این خصوصیت، کلاسهای اضافه برای ساخت خودکار نکته را تعیین میکند.
target
نام id موضوعی است که باید به صورت نکته نمایش داده شود. این گزینه همانند نوشتن id در خصوصت wn-tooltip است.
events
لیست رخدادهایی که اگر اتفاق افتادند، عمل نمایش نکته شروع شود.
lostevents
لیست رخدادهایی که اگر اتفاق افتادند، عمل مخفی کردن نکته اتفاق افتد.
show
با فراخوانی این متد، نکته نمایش داده میشود.
autoshow
با فراخوانی این متد، عمل نمایش نکته شروع میشود.
hide
با فراخوانی این متد، عمل مخفی کردن نکته آغاز میگردد.
LTR
RTL