این آموزش در تاریخ ۱۴۰۲/۰۶/۲۸ آپدیت شده است.
آموزش نحوه ایجاد ToolTip یا تولتیپ در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه ایجاد ToolTip یا تولتیپ در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ToolTip یا تولتیپ در 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; } |