این آموزش در تاریخ ۱۳۹۸/۱۲/۱۹ آپدیت شده است.
آموزش نحوه ایجاد 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 :
|
1 2 3 4 5 6 7 |
<body> <p title="Salam Khobi? Man Sadegh Hastam."> لطفا ماوس را برای چند لحظه روی این متن نگه دارید </p> </body> |
Free-Learn
نحوه ایجاد ToolTip یا تولتیپ در CSS
برای ایجاد تولتیپ یا Tooltip ما ۳ تا حالت یا ۳ تا کار باید انجام بدیم :
- ایجاد متنی که به کاربر بگه ماوس رو بیار روی من
- ایجاد محتوای تولتیپ و پنهان کردن آن از دید کاربران (چون میخوایم وقتی ماوس رفت روش محتوا نشون داده بشه)
- ایجاد حالت hover روی عنصر ، برای نمایش متنی که پنهان کردیم
لطفا به مثال زیر توجه نمایید و همچنین توضیح کامل دستورات موجود در مثال زیر را میتوانید در پایین همین مثال مطالعه نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<style> .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; } </style> |
خب بریم برای توضیح دستورات موجود در مثال بالا ، در مثال بالا ۳ بخش به شرح زیر داریم :
- .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 که با استفاده از آن میتوانیم موقعیت قرار گیری یک عنصر را مشخص نماییم.
مثال شماره ۱ : نمایش در سمت بالا
|
1 2 3 4 |
position: absolute; bottom: 100%; left: 50%; margin-left: -70px; |
مثال شماره ۲ : نمایش در سمت راست
|
1 2 3 |
position: absolute; top: -5px; left: 105%; |
مثال شماره ۳ : نمایش در سمت پایین
|
1 2 3 4 |
position: absolute; top: 100%; left: 50%; margin-left: -70px; |
مثال شماره ۴ : نمایش در سمت چپ
|
1 2 3 4 |
position: absolute; z-index: 1; top: -5px; right: 105%; |
Free-Learn
نحوه سفارشی سازی تولتیپ
در ادامه آموزش نحوه ایجاد ToolTip یا تولتیپ در CSS ، در این قسمت میخوایم یکمی تولتیپ مون رو سفارشی تر کنیم، در واقع یکمی خوشکلترش کنیم.
اضافه کردن فلش / پیکان / Arrow به تولتیپ از سمت بالا
|
1 2 3 4 5 6 7 8 9 10 |
.tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #8AC007 transparent transparent transparent; } |
اضافه کردن فلش / پیکان / Arrow به تولتیپ از سمت راست
|
1 2 3 4 5 6 7 8 9 10 |
.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 به تولتیپ از سمت پایین
|
1 2 3 4 5 6 7 8 9 10 |
.tooltip .tooltiptext::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #8AC007 transparent; } |
اضافه کردن فلش / پیکان / Arrow به تولتیپ از سمت چپ
|
1 2 3 4 5 6 7 8 9 10 |
.tooltip .tooltiptext::after { content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent #8AC007; } |
Free-Learn
تغییر شکل ماوس با نمایش تولتیپ
حالا میخوایم کاری کنیم که وقتی ماوس بروی متن تولتیپ رفت شکلش تغییر پیدا کنه، مثلا شکلش بشه علامت دست ، یا مثلا علامت در حال بارگذاری و..
مثال شماره ۱ : در مثال زیر شکل ماوس به دست تبدیل می شود.
|
1 2 3 |
.tooltip { cursor:pointer; } |
مثال شماره ۲ : شکل ماوس به ( در حال بارگذاری ) تبدیل می شود.
|
1 2 3 |
.tooltip { cursor:wait; } |
Free-Learn
نحوه اضافه کردن انیمیشن به تولتیپ
در جلسات قبلی بطور کامل آموزش کار با انیمیشن ها یا Animations را در CSS3 آموزش دادم که در صورت تمایل میتوانید با کلیک بروی لینک مورد نظر آن جلسه را مشاهده نمایید.
مثال شماره ۱ : استفاده از ویژگی Transition یا ترنزیشِن
|
1 2 3 4 5 6 7 8 |
.tooltip .tooltiptext { opacity:0; -webkit-transition:opacity 2s; transition:opacity 2s; } .tooltip:hover .tooltiptext { opacity:1; } |
Free-Learn
خب دوستان خسته نباشید به پایان ( آموزش نحوه ایجاد ToolTip یا تولتیپ در CSS ) رسیدیم، امیدوارم که هیچ مشکلی در این جلسه نداشته باشید.
دریافت PDF یا پرینت این مطلب