آموزش نحوه ایجاد ToolTip یا تولتیپ در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه ایجاد ToolTip یا تولتیپ در CSS با من همراه باشید.

آموزش نحوه ایجاد ToolTip یا تولتیپ در CSS

Free-Learn

ToolTip یا تولتیپ در CSS

فکر کنم تا الان باید اسم تولتیپ به گوشتون خورده باشه ! آره تولتیپ به متن یا تصویر یا .. (غیره) که وقتی ماوس بروی یک عنصر قرار میگیرد نمایش داده می شود، گفته می شود.

مثلا میبینید وقتی ماوس بروی یک تصویر hover (هووِر) می شود، یک باکس متن در بالای تصویر ظاهر می شود و اطلاعاتی در مورد اون تصویر به ما نشان میدهد.

هووِر یا hover شدن، یعنی وقتی ماوس بروی یک عنصر قرار میگیرد یا اینجوری بگیم وقتی ماوس بروی یک عنصر move می شود.

hover یک شبه کلاس می باشد، اگر تمایل دارید نحوه کار با hover را یاد بگیرید لطفا بروی این لینک کلیک نمایید.

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

Free-Learn

تولتیپ یا ToolTip در HTML

در زبان HTML ما میتونیم با استفاده از صفت Title به راحتی تولتیپ ایجاد کنیم ، ولی خب تولتیپی که در HTML ایجاد میشه با تولتیپی که در CSS درست میکنیم یکمی فرق میکنه.

الان برای مثال لطفا ماوس تان را بروی این کلمه یا کلن روی این پاراگراف بیاورید و چند لحظه نگه دارید، همانطور که مشاهده مینمایید ما باز تونستیم تولتیپ ایجاد کنیم.

تفاوت تولتیپی که در HTML ایجاد می شود با تولتیپی که در CSS ایجاد میشه :

  • در HTML مدت زمان بیشتری میخواد تا تولتیپ ظاهر بشه
  • در HTML به اندازه CSS نمیتونیم تولتیپ را سفارشی سازی کنیم
  • با استفاده از CSS میتونیم محل قرارگیری تولتیپ را به دلخواه مشخص کنیم. (مثلا بالا،راست،چپ و یا پایین باشه)

مثال : نحوه ایجاد تولتیپ در HTML با استفاده از صفت Title :

امتحان کنید

Free-Learn

نحوه ایجاد ToolTip یا تولتیپ در CSS

برای ایجاد تولتیپ یا Tooltip ما ۳ تا حالت یا ۳ تا کار باید انجام بدیم :

  1. ایجاد متنی که به کاربر بگه ماوس رو بیار روی من
  2. ایجاد محتوای تولتیپ و پنهان کردن آن از دید کاربران (چون میخوایم وقتی ماوس رفت روش محتوا نشون داده بشه)
  3. ایجاد حالت hover روی عنصر ، برای نمایش متنی که پنهان کردیم

لطفا به مثال زیر توجه نمایید و همچنین توضیح کامل دستورات موجود در مثال زیر را میتوانید در پایین همین مثال مطالعه نمایید.

امتحان کنید

خب بریم برای توضیح دستورات موجود در مثال بالا ، در مثال بالا ۳ بخش به شرح زیر داریم :

  • .tooltip : متنی که به کاربر بگه ماوس رو بیار روم
  • .tooltip .tooltiptext : متن خوده تولتیپ
  • .tooltip:hover .tooltiptext : وقتی ماوس میره روی عنصر متن تولتیپ نمایش داده می شود

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

  • position : برای تعیین موقعیت یا محل قرار گیری یک عنصر
  • display : برای تعیین نحوه نمایش یک عنصر
  • border-bottom : برای کشیدن یک خط به زیر یک عنصر
  • visibility : برای پنهان کردن یا مخفی کردن یک عنصر
  • width : برای تعیین اندازه عرض یک عنصر
  • background-color : برای تعیین رنگ زمینه یک عنصر
  • color : برای تعیین رنگ متن یک عنصر
  • text-align : برای تعیین تراز متن یا موقعیت قرار گیری متن
  • padding : برای ایجاد یک فضای درونی در یک عنصر
  • border-radius : برای گرد کردن لبه های یک عنصر
  • z-index : برای اینکه یک عنصر بالاتر از تمامی عناصر در یک صفحه قرار بگیرد

توضیح بخش / کلاس tooltip : همونطور که گفتم تو این بخش اون محتوایی قرار میگیره که در مرورگر نمایش داده می شود و به کاربر میگه مثلا ماوس رو بیار روی من.

توضیح بخش / کلاس tooltiptext : اینم که همون محتوای تولتیپ ماست و باید از دید کاربر بصورت پیش فرض پنهان باشد ، برای پنهان کردن محتوای تولتیپ از ویژگی visibility با مقدار hidden استفاده مینماییم.

توضیح بخش / کلاس tooltip:hover : تو این قسمت هم تعریف میکنیم که وقتی ماوس رفت روی کلاس tooltip یا ( در واقع روی متنی که به کاربر میگه ماوس رو بیار روی من ) محتوای تولتیپ رو که پنهان کرده بودیم رو نمایش بده ، که برای نمایش هم از ویژگی visibility با مقدار visible استفاده میکنیم.

Free-Learn

نحوه نمایش تولتیپ در سمت بالا ، پایین ، راست و چپ

حالا میخوایم یاد بگیریم که چجوری میتونیم محل یا موقعیت قرار گیری متن تولتیپ رو به دلخواه خودمون مشخص کنیم، مثلا من میخوام محتوای تولتیپ در بالا متن تولتیپ نمایش داده شود.

همونطور که کمی قبل مشاهده کردید یک ویژگی داریم به اسم position که با استفاده از آن میتوانیم موقعیت قرار گیری یک عنصر را مشخص نماییم.

مثال شماره ۱ : نمایش در سمت بالا

امتحان کنید

مثال شماره ۲ : نمایش در سمت راست

امتحان کنید

مثال شماره ۳ : نمایش در سمت پایین

امتحان کنید

مثال شماره ۴ : نمایش در سمت چپ

امتحان کنید

Free-Learn

نحوه سفارشی سازی تولتیپ

در ادامه آموزش نحوه ایجاد ToolTip یا تولتیپ در CSS ، در این قسمت میخوایم یکمی تولتیپ مون رو سفارشی تر کنیم، در واقع یکمی خوشکلترش کنیم.

اضافه کردن فلش / پیکان / Arrow به تولتیپ از سمت بالا

امتحان کنید

اضافه کردن فلش / پیکان / Arrow به تولتیپ از سمت راست

امتحان کنید

اضافه کردن فلش / پیکان / Arrow به تولتیپ از سمت پایین

امتحان کنید

اضافه کردن فلش / پیکان / Arrow به تولتیپ از سمت چپ

امتحان کنید

Free-Learn

تغییر شکل ماوس با نمایش تولتیپ

حالا میخوایم کاری کنیم که وقتی ماوس بروی متن تولتیپ رفت شکلش تغییر پیدا کنه، مثلا شکلش بشه علامت دست ، یا مثلا علامت در حال بارگذاری و..

مثال شماره ۱ : در مثال زیر شکل ماوس به دست تبدیل می شود.

امتحان کنید

مثال شماره ۲ : شکل ماوس به ( در حال بارگذاری ) تبدیل می شود.

امتحان کنید

Free-Learn

نحوه اضافه کردن انیمیشن به تولتیپ

در جلسات قبلی بطور کامل آموزش کار با انیمیشن ها یا Animations را در CSS3 آموزش دادم که در صورت تمایل میتوانید با کلیک بروی لینک مورد نظر آن جلسه را مشاهده نمایید.

مثال شماره ۱ : استفاده از ویژگی Transition یا ترنزیشِن

امتحان کنید

Free-Learn

خب دوستان خسته نباشید به پایان ( آموزش نحوه ایجاد ToolTip یا تولتیپ در CSS ) رسیدیم، امیدوارم که هیچ مشکلی در این جلسه نداشته باشید.

دریافت PDF یا پرینت این مطلب