میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

تولتیپ (Tooltip) در CSS

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

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

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

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

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

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

<p title="Salam Khobi? Man Sadegh Hastam.">
لطفا ماوس را برای چند لحظه روی این متن نگه دارید
</p>


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

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

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

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

tooltip {
position: relative;
display: inline-block;
border-bottom: 1px solid blue;
}


.tooltip .tooltiptext {
visibility: hidden;
width: 150px;
background-color: #8AC007;
color: #fff;
text-align: center;
border-radius: 10px;
padding: 5px 0;
position: absolute;
z-index: 1;
}


.tooltip:hover .tooltiptext {
visibility: visible;
}

 

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

  • .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 استفاده میکنیم.


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

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

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

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

position: absolute;
top: -5px;
left: 105%;

 

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

position: absolute;
top: 100%;
left: 50%;
margin-left: -70px;

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

 


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

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

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

 

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

 

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #8AC007 transparent transparent;
}

 

 

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

 

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

 

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

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

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

 

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


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

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

 

 


امیدواریم آموزش تولتیپ (Tooltip) در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
cssTooltip در CSSw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfتولتیپ (Tooltip) در CSSتولتیپ در CSSدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟