آموزش طراحی وب

نحوه ایجاد Tooltip افکت دار با CSS3

در این مقاله ی آموزشی نحوه ی کدنویسی یه tooltip زیبارو خدمتتون آموزش میدم که افکت داره و با css3 پیاده سازی شده و نیازی به جی کوئری هم نداره.

 123_1x

Tooltip افکت دار با CSS3

سلام همراهان همیشگی مدرسه مجازی ایرانیان و ماهنامه طراحی وب

در این مقاله قصد دارم نحوه ی کدنویسی یه tooltip رو خدمتتون آموزش بدم که افکت داره و نیازی به جی کوئری هم ندارید . من با این دید که شما با css3 آشنا هستید این موضوع رو آموزش میدم . در صورتی که با css3 آشنایی ندارید چند تا لینک گذاشتم که با مطالعه ی اون ها موضوع براتون بیشتر جا میوفته .

مقاله ی مربوط به position هاو z-index

مقاله ی مربوط به transform

مقاله ی مربوط به transition

خوب دوستان میریم سر اصل مطلب یعنی آموزش 🙂 بهتره که با من قدم به قدم مراحل و جلو برید تا کاملا موضوع رو درک کنید .

معمولا لینک ها هستند که نیاز به tooltip دارن. پس یه عنصر a رو برای این کار در نظر میگیریم .

حالا برای اینکه زیبا به نظر برسه یکم بهش استایل میدیم :

خوب تا اینجاشو که همه بلد بودیم حالا ما میخوایم زمانی که موس روی عبارت مدرسه مجازی ایرانیان قرار گرفت ، یه تولتیپ باز بشه و توضیحاتی رو ارائه کنه . برای درج توضیحات ما میایم و یه خصوصیت به این عنصر اضافه میکنیم و توضیحاتمون رو در اون خاصیت درج می کنیم .

نکته : شما در html میتونید خاصیت های خاص خودتون رو در صورت نیاز تعریف کنید بدون اینکه در استانداردهای html تعریف شده باشه .

 

در اینجا ما خاصیتی به نام data-iro با مقدار ” آموزش طراحی وب ” تعریف کردیم . حالا باید با css3 این خاصیت رو نمایش بدیم .

به عنصر a و خاصیتمون استایل زیر رو اختصاص میدیم :

 

اگر خاطرتون باشه و جلسه ی آموزشی مربوط به position هارو مطالعه کرده باشید ، زمانی که relative رو به عنصر والد اختصاص میدید ، موقعیت مکانی هر آنچه که مربوط به این عنصر و درون این عنصر باشه و position absolute رو داشته باشه ، نسبت به موقعیت مکانی عنصر والد محاسبه میشه .

در اینجا چون ما عنصر داخلی نداریم و داریم روی خاصیت عنصر کار می کنیم ، نمیتونیم به عنصر خاص و معینی استایل بدیم تا به عنوان تولتیپ نمایش داده بشه ، ما باید به خاصیتمون استایل بدیم . برای همین از کلاس های کاذب استفاده می کنیم .

استایل زیر رو به استایل ها اضافه می کنیم :

دلیل اعمال absolute رو که خدمتتون توضیح دادم . زمانی که شما موس رو روی عنصر میبرید و تولتیپ نمایش داده میشه ، این تولتیپ نسبت به موقعیت مکانی عنصر a نمایش داده میشه . مثلا نمیاد اول صفحه نمایش داده بشه ، میاد هرجایی که عنصر a قرار گرفته نمایش داده میشه .

Transform و transition هم به دلیل اعمال افکت در نمایش تولتیپ درج کردیم .

برای پنهان کردن اولیه ی تولتیپ از visibility و opacity استفاده کردیم . دلیلشم اینه که باید در ابتدا پنهان باشه و زمانی که موس روی لینک قرار میگیره نمایان بشه .

از z-index استفاده کردیم تا تولتیپ هنگام نمایش ، روی تمامی عناصر قرار بگیره .

از pointer-events استفاده کردیم تا select یا انتخاب متن داخل تولتیپ امکان پذیر نباشه .

 

خوب حالا به این تولتیپ استایل میدیم :

 

با کلاس کاذب before به خود تولتیپ استایل میدیم و با کلاس کاذب after به خصوصیت data-iro استایل میدیم .

عبارت content: attr(data-iro) یعنی محتوای خصوصیت data-iro رو در این تولتیپ نمایش بده .

تا اینجا شما موفق شدید خاصیتی که تعریف کرده بودید رو بصورت تولتیپ نمایش بدید ولی برای نمایش کامل تولتیپ هنوز کار داریم .

برای زیباتر نشون دادن تولتیپ باید استایل بیشتری رو اعمال کنیم . برای اینکار یه کلاس دیگه تعریف می کنیم و ادامه ی استایل هارو به اون میدیم تا موضوع پیچیده نشه و کدهامون بهینه تر باشه .

 

حالا استایل زیر رو به کلاس جدید میدیم :

اول یه پیکان کوچیک مثلثی شکل ایجاد می کنیم :

 

حالا این پیکان رو در مکان مناسب قرار میدیم :

 

به تولتیپ هم استایل نهایی و میدیم تا در مکان مناسبی قرار بگیره :

دقت داشته باشید که موقعیت مکان ها نسبت به عنصر a اعمال میشه .

حالا برای اینکه این عملیات با افکت اجرا بشه استایل زیر رو اضافه می کنیم :

 

خوب ما تمامی استایل هارو دادیم، در نهایت میخوایم بگیم زمانی که موس روی عبارت رفت این تولتیپ ظاهر بشه :

 

به همین راحتی 🙂 حالا شما یه تولتیپ زیبا دارید که بدون کدهای جی کوئری با افکت برای شما اجرا میشه .

1

امیدوارم که خوشتون اومده باشه 🙂

منتشر شده در چهارمین ماهنامه طراحی وب

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۲۴

  • بابت آموزش نحوه ساختن Tooltip و آموزش های دیگر کاربردی دیگر ممنونم .
    لطفا توسط هیچ چیز متوقف نشوید که هم اکنون جوانان ما بیش از هر زمان دیگری به سایت هایی مانند سایت شما نیاز دارند .

  • با سلام و خسته نباشید بابت مطالب خوبتون
    من یه دکه درست کردم که بصورت زیر هستش

    اگه بخوام چنین تولتیپی براش درست کنم باید چیکار کنم
    اینم بگم که تو css مبتدی هستم
    ممنون میشم راهنماییم کنید.

    • سلام دوست عزیز
      لطفا کد رو بصورت کامل بصورت فایل زیپ آپلود کنید و برای من ارسال کنید.

    • سلام دوست عزیز
      متاسفانه فایلی که ارسال فرمودید زیاد هست و فرصت چک کردنش رو ندارم . لطفا همون بخشی که مد نظرتون هست و مرتبط با موضوع میشه ارسال کنید.
      موفق و پاینده باشید.

  • مرسی آقای همت یار از پیگیریتون
    داخل فایل زیپی که براتون فرستادم دو تا فایل بود که یکیشون مختص همون بخشیه که میخوام تولتیپ روش اجرا بشه
    ممنون میشم کمکم کنید

  • با سلام مجدد خدمت آقای همت یار
    ممنون بابت کدتون قسمت css رو فهمیدم اما اون قسمتی رو که شامل متن دکمه و تولتیپ و لینک دکمه میشه رو بجای html باید تو قسمتی از یک کد php قرار بدم
    کد php رو براتون ارسال کردم ممنون میشم راهنماییم کنید
    با تشکر فراوان
    http://erayaneh.ir/phpnew.rar

    • سلام دوست عزیز
      کدتون و دیدم ، هیچ کاری نداره جایگزین کردن کدهای html ، کاملا مشخصه ، فقط یکم دقت کنید متوجه میشید.
      موفق و پاینده باشید.

  • ممنون آقای همت یار
    خیلی خیلی خیلی ممنون و سپاسگذارم
    درست شد.
    واقعا باید بگم خسته نباشید از اینکه با دقت تمام مشکلات بنده رو در این زمینه به سادگی حل کردید
    این مطلب برای من باعث شد چند تا نکته مهم رو یاد بگیرم و مهم تر از همه اینجا بود که قسمت آخرو شما بعهده خودم گذاشتید، تا یاد بگیرم. شاید برای شما ساده باشه اما برای من کمی دشوار بود که بالاخره تونستم درستش کنم
    موفق و سربلند
    یا حق

    • سلام دوست عزیز
      خوشحالم از اینکه با پیگیری و دقت تونستید مشکلتون رو حل کنید.
      موفق و پاینده باشید.

  • سلام
    آقای همت یار من تولتیپ رو بسته به موقعیت دکمه مذکور تغییر دادم همه چی درسته اما اون مثلته چطور باید برعکس بشه
    لطفا یه نگاه بندازید
    http://erayaneh.ir/component/k2/item/41-%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%D9%81%D8%A7%DB%8C%D9%84-%D9%84%D8%A7%DB%8C%D9%87-%D8%A8%D8%A7%D8%B2-%D9%85%D8%B1%D8%AF%D9%85-%D9%88-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C.html

    • سلام دوست عزیز
      سایتتون رو بررسی کردم، در حال حاضر تولتیپ درست کار میکنه . مشکلی ندیدم.

  • با سلام. تشکر میکنم بابت آموزش خوبتون.
    من برای خودم یه جور دیگه این رو درست کردم.
    یعنی با jquery گفتم زمانی که روی یک دکمه کلیک شد یه Tooltip پایینش باز بشه.
    ** اینم لینک دانلودش :
    http://s6.uplod.ir:182/d/2k2y5nh24hvhuf6tf2pin5twwm5w4ysy3xdvy3bwgsn5x3r2dbskavq4/tt.html
    **********
    فقط یه مشکلی دارم:
    اونم اینه که با عوض شدن جای دکمه ، جای Tooltip عوض نمیشه. (یعنی من اگه float دکمه رو right کنم، Tooltip همون چپ میمونه)….!!!

    اگه امکانش هست راهنماییم کنید.
    با تشکر

    • سلام دوست عزیز
      فایلی که ارسال فرمودید پیغام خطا میده.
      موفق و پاینده باشید

  • سلام ممنونم به خاطر این آموزشتون.
    فقط اینکه من نیازی به کلاس .tooltip-top رو حس نکردم یعنی اینکه ما هر ویژگی که خواستیم به عنصرمون بدیم رو به همون کلاس tooltip میدیم دیگه.
    واینکه وقتی میگیم .tooltip:hover:after چون tooltip کلاس عنصر والد و اصلیه پس دیگه چه نیازیه که یه بار دیگه این دستور رو به خاصیت [iro-school] بدیم؟

    • سلام دوست عزیز
      متاسفانه برای هر سوال فرصت نمیکنم مقاله رو مجدد مطالعه کنم. هرچیزی که تو مقاله نوشته شده در اون زمان نیاز بوده و همگی بیان شده ، دلیل اینکه این کلاس رو اضافه کردم هم نوشته شده اگر شما با قرار دادن تمامی دستورات در یک کلاس مشکلی ندارید و شمارو سردرگم نمیکنه کلاس اضافه تعریف نکنید.
      موفق و پاینده باشید

  • سلام و عرض ادب و خسته نباشید
    به کارتون ادامه بدید
    تیم شما فوق العاده است
    کمتر تیمی دیدم که کدهای به این زیبایی و مهارتی کم نظیر رو به انتشار عموم بذاره
    آن هم به صورت رایگان
    موفق و سربلند و پیروز باشید

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

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