تول تیپ در CSS

تول تیپ عبارت است از یک باکس کوچک حاوی یک سری اطلاعات که با قرار گیری نشانگر موس کاربر بر روی یک لینک ، تصویر و ... نمایان میشود. در این فصل با استفاده از CSS به ساخت یک تول تیپ میپردازیم.


یک تول تیپ ساده

در نمونه مثال زیر کاربر نشانگر موس را بر روی عنصر مشخص شده قرار میدهد و تول تیپ نمایش داده میشود :

<style>
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

توضیح مثال :

در نمونه مثال بالا از یک عنصر container همچون <div> استفاده شده است و کلاس "tooltip" به آن اضافه شده است. وقتی کاربر نشانگر موس را روی این <div> قرار میدهد، متن تول تیپ نمایش داده میشود.

متن تول تیپ داخل یک عنصر inline (مانند <span>) با کلاس "tooltiptext" قرار گرفته است.

کلاس tooltip از position:relative استفاده میکند که برای قرارگیری درست متن تول تیپ نیاز است (position:absolute).

کلاس tooltiptext متن تول تیپ را در خود نگه میدارد. آن به صورت پیشفرض مخفی است و با قرار گیری نشان گر موس روی عنصر مورد نظر، نمایش داده میشود.

ما همچنین یک سری استایل های پایه نیز به آن اضافه کرده ایم مانند : پهنای 120 پیکسل،رنگ مشکی بک گراند، رنگ متن، وسط چین کردن متن و مقداری padding.

صفت border-radius در CSS3 برای اضافه کردن گوشه های گرد به باکس تول تیپ استفاده شده است.

از انتخاب کننده ی hover: برای نمایش تول تیپ، موقعی که کاربر نشانگر موس را روی عنصر <div> با کلاس "class="tooltip قرار میدهد استفاده میشود.

 


مشخص کردن مکان تول تیپ

در نمونه مثال زیر، تول تیپ در سمت راست (left:105%) عنصری قرار گرفته است که نشانگر موس باید روی آن قرار بگیرد (<div>). دقت داشته باشید که از top:-5px برای قرارگیری تول تیپ در وسط عنصر container خود استفاده شده است. ما از مقدار 5 استفاده کرده ایم زیرا که متن تول تیپ دارای padding بالا و پایین با مقدار 5 پیکسل است. اگر شما مقدار padding را برای تول تیپ افزایش دادید، مطمئن شوید که برای باقی ماندن متن تول تیپ در وسط، مقدار top را نیز به همان اندازه افزایش دهید.

مثالی از یک تول تیپ در سمت راست container خود :

.tooltip .tooltiptext {
    top: -5px;
    left: 105%; 
}

مثالی از یک تول تیپ در سمت چپ container خود :

.tooltip .tooltiptext {
    top: -5px;
    right: 105%; 
}

اگر شما میخواهید تول تیپ در بالا و یا پایین نمایش داده شود ، مثال زیر را ببینید. دقت داشته باشید که ما از صفت margin-left با مقدار 60- پیکسل استفاده کرده ایم. این برای وسط قرار دادن تول تیپ در بالا و پایین عنصر container استفاده شده است که با نصف مقدار پهنای تول تیپ تنظیم شده است (60 = 120/2).

مثالی از یک تول تیپ در بالای container خود :

.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;
    left: 50%; 
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

مثالی از یک تول تیپ در پایین container خود :

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left: 50%; 
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

فلش های تول تیپ

برای ساخت یک فلش که باید در سک سمت خاص از یک تول تیپ نمایش داده شود، محتوای "تهی"(در اینجا  " ": content) را بعد از تول تیپ اضافه کنید. با استفاده از شبه عنصر after:: و با استفاده از صفت content میتوان این کار را انجام داد. خود فلش با استفاده از border ها ساخته میشود. این باعث میشود که تول تیپ شبیه حباب های گفتگو شود .

نمونه مثال زیر نشان میدهد که چطور یک فلش را با پایین یک تول تیپ اضافه کنیم :

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

توضیح مثال :

مکان قرارگیری فلش داخل تول تیپ : top: 100% فلش را در پایین تول تیپ قرار میدهد. left: 50% فلش را در وسط تول تیپ قرار میدهد.

نکته : صفت border-width اندازه ی فلش را مشخص میکند. اگر شما این را تغییر دهید بهتر است مقدار margin-left را نیز به همان مقدار تغییر دهید. این باعث میشود که فلش همچنان در وسط تول تیپ باقی بماند.

 

از border-color برای تغییر شکل دادن محتوا به یک فلش استفاده میشود. ما border بالایی را با مقدار black تنظیم کرده ایم، و بقیه به حالت شفاف هستند. اگر تمام سمت ها مشکی بودند شما با یک باکس مربعی مشکی روبه رو بودید. 

نمونه مثال زیر نشان میدهد که چطور میتوان یک فلش را به بالای یک تول تیپ اضافه کرد. دقت کنید که ما در این مثال رنگ border پایینی را نیز تنظیم کرده ایم :

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

نمونه مثال زیر نشان میدهد که چگونه یک فلش را به سمت چپ یک تول تیپ اضافه کنیم :

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

نمونه مثال زیر نشان میدهد که چگونه یک فلش را به سمت راست یک تول تیپ اضافه کنیم :

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}

Fade شدن تول تیپ در هنگام نمایش 

اگر بخواهید تول تیپ به حالت انیمیشن Fade نمایش یابد، میتوانید از صفت transition در CSS3 به همراه صفت opacity استفاده کنید :

tooltip .tooltiptext {
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    opacity: 1;
}

 

دیدگاه ها

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید

دیدگاه های ارزشمند شما

trever filips - ۲ سال قبل
برای css از notepad++ استفاده میکردم اما برای java script میخوام از visual studio استفاده کنم نظر شما چیه ؟
حمید رضا ملکی - ۲ سال قبل

سلام.. به نظرم از visual studio code استفاده کنید

trever filips - ۲ سال قبل
سلام من اموزش css شما رو کامل یادگرفتم از css چیز دیگری هم باید یاد بگیرم یا وارد javascript شم؟
حمید رضا ملکی - ۲ سال قبل

سلام.. وارد جاوا اسکریپت بشید..

trever filips - ۲ سال قبل
سلام ممنون. من css رو تمام کردم بعدش چی رو شروع کنم برای اینکه بتونم سایت خیلی خوب بسازم ؟
حمید رضا ملکی - ۲ سال قبل

سلام.. معمولا بعد از css میتونید جاوا اسکریپت را شروع کنید

محمدسبحان سوری - ۲ سال قبل
سلام خسته نباشید تشکر ویژه میکنم از شما بابت زحماتتون اموزش های خوب شما باعث شد که من html و css رو در زمان خیلی کمی یاد بگیرم. آرزوی موفقیت برای شما دارم. خدانگهدار
کاربر مهمان - ۴ سال قبل
سلام خسته نباشید ببخشید کی این قسمت مثل مثال به زودی میزنید؟زودتر درست کنید ممنون میشم
حمید رضا ملکی - ۴ سال قبل

سلام. ممنون از شما. سعی میکنم تا نهایت یکی دو روز آینده امتحان کنید ها برای این قسمت قرار بدم.

کاربر مهمان - ۴ سال قبل
سلام چرا این مورد مثال نداشت. من که مشکلم توی tooltip بود شمام ظاهرا این مشکل را دارید!
حمید رضا ملکی - ۴ سال قبل

سلام. نه مشکلی در مثال های تول تیپ های توضیح داده شده نیست. من فرصت نکردم خودتان امتحان کنید ها را قرار بدم. به زودی این قسمت تکمیل میشه.

هدف لرن سورس

لرن سورس با هدف ایجاد یک مرجع کامل و جامع در زمینه آموزش دوره محور زبان های برنامه نویسی و وب پا به عرصه وب گذاشته است.

ما در لرن سورس همیشه سعی خواهیم کرد تا نیاز های آموزشی شما کاربران عزیز را در قالب آموزش های مختلف پاسخ دهیم.

بخش های اصلی

با استفاده از لینک های زیر میتوانید به بخش های اصلی سایت دسترسی داشته باشید:

راه های ارتباطی

شما کاربران عزیز میتوانید با هر کدام از راه های ارتباطی زیر با تیم آموزشی لرن سورس در ارتباط باشید:

کلیه حقوق مادی و معنوی وبسایت متعلق به لرن سورس می باشد.