این آموزش در تاریخ ۱۴۰۰/۱۰/۱۳ آپدیت شده است.
آموزش نحوه ایجاد 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 میتونیم محل قرارگیری تولتیپ را به دلخواه مشخص کنیم (مثلا بالا ، پایین )
|
1 2 3 4 5 6 7 |
<body> <p title="سایت آموزشی فری لرن"> لطفا ماوس را برای چند لحظه روی این متن نگه دارید </p> </body> |
Free-Learn
نحوه ایجاد ToolTip یا تولتیپ در CSS
برای ایجاد تولتیپ یا Tooltip با استفاده از CSS ما ۳ تا کار باید انجام بدیم :
- ایجاد متنی که به کاربر بگه ماوس رو بیار روی من
- ایجاد محتوای تولتیپ و پنهان کردن آن از دید کاربران ( چون میخوایم وقتی ماوس رفت روش محتوا نشون داده بشه )
- وقتی ماوس رفت روی متن ، محتوای تولتیپ نمایش داده بشه
- .tooltip : متنی که به کاربر بگه ماوس رو بیار روم
- .tooltip .tooltiptext : محتوای خوده تولتیپ
- .tooltip:hover .tooltiptext : وقتی ماوس میره روی تگ، محتوای تولتیپ نشون داده میشه
کلاس tooltip : همونطور که گفتم تو این بخش اون محتوایی قرار میگیره که در مرورگر نمایش داده می شود و به کاربر میگه مثلا ماوس رو بیار روی من.
کلاس tooltiptext : اینم که همون محتوای تولتیپ ماست و باید از دید کاربر بصورت پیش فرض پنهان باشد ، برای پنهان کردن محتوای تولتیپ از ویژگی display با مقدار none استفاده میکنیم
tooltip:hover : تو این قسمت هم تعریف میکنیم که وقتی ماوس رفت روی کلاس tooltip یا ( در واقع روی متنی که به کاربر میگه ماوس رو بیار روی من ) محتوای تولتیپ رو که پنهان کرده بودیم رو نمایش بده ، که برای نمایش هم از ویژگی display با مقدار block استفاده میکنیم
Free-Learn
مثال از تولتیپ در CSS
مثال شماره ۱ : نمایش تولتیپ در سمت بالا
|
1 2 3 4 |
position: absolute; left: 50%; bottom: 150%; margin-left: -70px; |
مثال شماره ۲ : نمایش تولتیپ در سمت راست
|
1 2 3 |
position: absolute; top: -5px; left: 110%; |
مثال شماره ۳ : نمایش تولتیپ در سمت پایین
|
1 2 3 4 |
position: absolute; top: 150%; left: 50%; margin-left: -70px; |
مثال شماره ۴ : نمایش تولتیپ در سمت چپ
|
1 2 3 |
position: absolute; top: -5px; right: 110%; |
Free-Learn
تغییر شکل ماوس با نمایش تولتیپ
حالا میخوایم کاری کنیم که وقتی ماوس بروی متن تولتیپ رفت شکلش تغییر پیدا کنه، مثلا شکلش بشه علامت دست ، یا مثلا علامت در حال بارگذاری و..
مثال شماره ۱ : وقتی ماوس میره روی متن، به آیکون دست تبدیل میشه
|
1 2 3 |
.tooltip { cursor:pointer; } |
