تول تیپ در 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;
}

 

منتشر شده در ۱ مهر ۱۳۹۶ حمید رضا ملکی ۶۸۱ بازدید
دیدگاه ها
عجیباً غریباً شنبه ۲۹ اردیبهشت ۱۳۹۷

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

مدیر سایت شنبه ۲۹ اردیبهشت ۱۳۹۷

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