آموزش و سورس نحوه قرار دادن tooltip برای عناصر
0 0

آموزش و سورس نحوه قرار دادن tooltip برای عناصر


آموزش و سورس نحوه قرار دادن tooltip برای عناصر

در این پست آموزش نحوه قرار دادن tooltip حرفه ای را در سایت قرار داده ایم.

در بسیاری از سایت ها دیده اید زمانی که ماوس روی یک کادر ورودی یا input قرار می گیرد یک کادر کوچک باز شده و پیغام نوع چیزی که باید در کادر ورودی وارد کنید را نمایش می دهد. مثلا می گوید نام کاربری خود را وارد کنید.

برای ایجاد چنین حالتی را سایت می توان از جاوا اسکریپت و یا جی کوئری استفاده کرد ولی با ظهور HTML5 و CSS3 می توانید چنین کارهای را به راحتی انجام دهید.

ابتدا یک فایل hint.min.css را به برنامه خود اضافه کنید و سپس کادر ورودی خود را بین تگ div یا span و ... قرار دهید. 

<div class ="hint--left hint--success hint--rounded" data-hint ="نام کاربری خود را وارد کنید"><input id="user" /></div>

با استفاده class می توانید ظاهر نمایش پیغام را مشخص کنید و همچنین با استفاده از data-hint پیفام مورد نظر را مشخص می کنیم و همچنین می توانید نوع نمایش کادر پیغام را به صورتی اختصاصی تغییر دهید.

اولین کلاس، کلاسی هست که مشخص میکند که tooltip در چه قسمتی باز بشه. در اینجا چهار کلاس hint--top و hint--bottom و hint--left وhint--right وجود داره که به ترتیب بالا ، پایین ، چپ ، راست رو به tootip نسبت میده.

hint--error : به وسیله ی این کلاس رنگ tooltip قرمز میشه که علامته خطا هست

hint--info : رنگ tooltip آبی میشه

hint--warning : تقریبا زرد رنگ میشه که علامته هشداره

hint--success : رنگ tooltip سبز میشه که علامته موفقیته

hint--always : اگر از این کلاس استفاده کنیم ، اون tooltip همیشه نشون داده میشه و دیگه مخفی نمیشه.

hint--rounded : گوشه ی tooltip خمیده میشه و زیباتر میشه.

hint--no-animate : اگر از این کلاس استفاده بشه ، دیگه tooltip حالت انیمیشنی نداره و ساده نمایان میشه.

hint--bounce : باعث میشه که tooltip زیباتر نمایش داده بشه.

دانلود

نویسنده حسین فتحی
گروه مطلب CSS
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۲۰ مهر ۱۳۹۳
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران عضو سایت
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

این صفحه را می‌پسندم