آموزش و سورس نحوه قرار دادن 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 زیباتر نمایش داده بشه.