• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6252 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

Hint.css : قرار دادن tooltip برای عناصر

5 2767 ۲۴ شهریور ۹۳

در این مطلب میخوام قرار دادن tooltip رو به شما آموزش بدم. با استفاده از این روشی که امروز میگم ، کارا خیلی راحت میشه.

ابتدا به سایت مورد نظر برین. در اونجا مثالهایی قرار داده شده. هر گاه که بر روی بعضی از عناصر hover میکنیم یک tooltip نمایش داده میشه.

همونطور که در دمو مشاهده کردین ، tooltip ها با استایلهای متفاوتی وجود دارن.

برای دانلود کردن فایلهای مربوطه میتونین به Github برین. در این سایت میتونین همه فایلهای مربوطه رو بطور کامل دانلود بکنید. از اونجایی که فقط به فایل hint.min.css احتیاج داریم ، من اونو براتون قرار میدم تا کارتون راحتتر بشه :


بعد از اینکه فایل رو دانلود کردین ، باید اونو در پوشه ی پروژتون کپی کنید. بعدش باید در قسمت head کد زیر رو قرار بدین :

حالا برای هر عنصری که میخواین tooltip قرار بدین ، فقط کافیه که بصورت زیر عمل کنید :

همونطور که میبینید ، باید چنتا خاصیت رو به عنصر مورد نظر اضافه کنیم تا به هدفمون برسیم. در پایین براتون اون خاصیتارو توضیح میدم :

  • data-hint : متنی که در مقابل این خاصیت قرار میگیرد ، همان متنی هست که در tooltip نمایش داده میشه.
  • class : در این قسمت باید کلاس مورد نظر رو به عنصر مورد نظر نسبت بدین. کلاسهایی که در این قسمت میتونین استفاده کنین به شرح زیر هست :
  1. اولین کلاس موجود ، کلاسی هست که مشخص میکنه که tooltip در چه قسمتی باز بشه. در اینجا چهار کلاس hint--top و hint--bottom و hint--left وhint--right وجود داره که به ترتیب بالا ، پایین ، چپ ، راست رو به tootip نسبت میده.
  2. hint--error : به وسیله ی این کلاس رنگ tooltip قرمز میشه که علامته خطا هست
  3. hint--info : رنگ tooltip آبی میشه
  4. hint--warning : تقریبا زرد رنگ میشه که علامته هشداره
  5. hint--success : رنگ tooltip سبز میشه که علامته موفقیته
  6. hint--always : اگر از این کلاس استفاده کنیم ، اون   tooltip همیشه نشون داده میشه و دیگه مخفی نمیشه.
  7. hint--rounded : گوشه ی tooltip خمیده میشه و زیباتر میشه.
  8. hint--no-animate : اگر از این کلاس استفاده بشه ، دیگه tooltip حالت انیمیشنی نداره و ساده نمایان میشه.
  9. hint--bounce : باعث میشه که tooltip زیباتر نمایش داده بشه.

 

نکته : اینو هم بگم که شما میتونین از کلاسهای بالا همزمان استفاده کنیم. برای مثال کد زیر رو در نظر بگیرین :

از این بعد اگر بر روی div مورد نظر hover کنیم ، tooltip سبز رنگ ، با گوشه های خمیده و در پایین div نمایان میشه و متن Tanke you! درون tooltip نوشته شده.


میزان پشتیبانی مرورگرها :

این ابزار در آخرین مرورگرهای منتشر شده بخوبی کار میکنه.

  • Chrome : ساده + افکتهای transition
  • Firefox : ساده + افکتهای transition
  • Opera : ساده
  • Safari : ساده
  • IE10 : ساده + افکتهای transition
  • IE8 & IE9 : ساده

امیدوارم بدردتون بخوره.

موفق باشید. یا علی

 

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 5 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    مثل همیشه کاربری بود … آقای اسفندیاری … ممنون.

  • ‏‏
    ابراهیم(۲۲ خرداد ۱۳۹۵)

    من توی قالب انجام دادم و مشکلی نبود
    ولی توی وردپرس به مشکل خوردم. با نحوه فعالسازی قسمت تنظیمات منوی وردپرس و همینطور کلاس دادن به توضیحات منو و….راهنمایی میکنید لطفا؟؟

    • ‏‏
      محمد اسفندیاری(۲۲ خرداد ۱۳۹۵)

      دقیقا نفهمیدم چی گفتید
      میشه بیشتر توضیح بدید؟

      • ‏‏
        ابراهیم(۲۳ خرداد ۱۳۹۵)

        من توی وردپرس منو تشکیل دادم و میخوام هر وقت روی یکی از فیلدهای منو رفتم توضیحی براش بیاره.
        جون فیلد منوهام از دسته های سایتم شکل گرفته من دسترسی ندارم تا بهشون کلاس های hint بدم
        یه جا خوندم باید از بخش تنظیمات منو و قسمت توضیحات کلاس بدم تا فعال بشه..
        ولی بلد نیستم!!!
        درکل هر راهی که بشه توضیحی برای فیلدهای منو وردپرس اضافه کنم بگید ممنون میشم…
        امیدوارم منظورمو خوب رسونده باشم….
        ممنونم :roll:

        • ‏‏
          محمد اسفندیاری(۲۳ خرداد ۱۳۹۵)

          اگه بچه ها بلد باشن تو همون انجمن به سوالتون پاسخ میدن….اون دیگه میشه مربوط به وردپرس و مربوط به Hint.css نیست

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram