این آموزش در تاریخ ۱۴۰۲/۰۶/۲۸ آپدیت شده است.

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

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

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

Free-Learn

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

فکر کنم تا الان باید اسم تولتیپ به گوشتون خورده باشه ! آره تولتیپ میشه متن یا تصویر یا … که وقتی ماوس چند لحظه بروی یک عنصر قرار میگیره نمایش داده می شود.

وقتی ماوس میره روی یک تگ بهش میگیم هووِر یا hover شدن، که hover  یه شبه کلاس در زبان CSS می باشد.[ آموزش شبه کلاس hover در CSS ]

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

Free-Learn

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

در خوده زبان HTML با استفاده از صفت Title میتونیم یه تولتیپ ساده درست کنیم، یعنی وقتی ماوس رفت روی تگ و چند لحظه وایساد ، یسری توضیحات نمایش داده میشه، خب این میشه تولتیپ

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

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

امتحان کنید

Free-Learn

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

برای ایجاد تولتیپ یا Tooltip با استفاده از CSS ما ۳ تا کار باید انجام بدیم :

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

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

کلاس tooltiptext : اینم که همون محتوای تولتیپ ماست و باید از دید کاربر بصورت پیش فرض پنهان باشد ، برای پنهان کردن محتوای تولتیپ از ویژگی display با مقدار none استفاده میکنیم

tooltip:hover : تو این قسمت هم تعریف میکنیم که وقتی ماوس رفت روی کلاس tooltip یا ( در واقع روی متنی که به کاربر میگه ماوس رو بیار روی من ) محتوای تولتیپ رو که پنهان کرده بودیم رو نمایش بده ، که برای نمایش هم از ویژگی display با مقدار block استفاده میکنیم، به همین سادگی

Free-Learn

مثال از تولتیپ در CSS

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

امتحان کنید

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

امتحان کنید

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

امتحان کنید

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

امتحان کنید

Free-Learn

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

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

مثال شماره ۱ : وقتی ماوس میره روی متن، به آیکون دست تبدیل میشه

امتحان کنید

Free-Learn

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