ایجاد Tooltip با CSS

یک Tooltip اغلب برای مشخص کردن اطلاعات اضافی در مورد چیزی که کاربر اشاره گر موس را بر روی یک عنصر حرکت می دهد استفاده می شود:

Tooltip ساده

یک Tooltip ایجاد کنید که وقتی کاربر روی یک عنصر حرکت می کند، ظاهر می شود:

<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> 

شرح مثال

HTML: از یک عنصر (مانند <div>) استفاده کنید و کلاس "tooltip" را به آن اضافه کنید. وقتی کاربر موس را روی این <div> قرار می دهد، متنی را نشان می دهد.

متن tooltip داخل یک عنصر درون خطی (مانند <span>) با "class = "tooltiptext قرار می گیرد.

CSS: کلاس tooltip استفاده از موقعیت: نسبی است که مورد نیاز برای قرار دادن متن راهنمایی (موقعیت: مطلق) است. نکته: در مثال زیر در مورد چگونگی قرار دادن  Tooltip را ببینید.

کلاس tooltiptext متن واقعی tooltip را نگه می دارد. این به طور پیش فرض پنهان است و در شناور قابل مشاهده است (به زیر نگاه کنید). ما همچنین برخی از سبک های اولیه را به آن اضافه کردیم: عرض 120px، رنگ پس زمینه سیاه، رنگ متن سفید، متن متمرکز و 5px بالا و پایین padding.

ویژگی border-radius برای اضافه کردن گوشه های گرد به متن tooltip استفاده می شود.

انتخابگر :hover برای نشان دادن متن tooltip استفاده می شود زمانی که کاربر ماوس را روی <div> با "class = "tooltip حرکت می دهد.

موقعیت Tooltip

در این مثال، Tooltip به راست (چپ: 105٪) از متن "hoverable" (<div>) قرار می گیرد. همچنین توجه داشته باشید که بالای صفحه: -5px برای قرار دادن آن در وسط عنصر div مورد استفاده قرار می گیرد. ما از شماره 5 استفاده می کنیم، زیرا متن دارای پد بالا و پایین 5 پیکسل است. اگر مقدار padding خود را افزایش دهید، مقدار بالا را نیز افزایش می دهد تا اطمینان حاصل شود که در وسط قرار دارد. همین کار را اگر شما می خواهید راهنمای ابزار را به سمت چپ قرار دهید را میتوانید انجام دهید

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

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

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

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

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

فلش در Tooltip

برای ایجاد یک فلش که از طرف خاصی از ابزار ظاهر می شود، بعد از راهنمایی، با کلاس pseudo-element ::  سپس ::after با همراه content "خالی" را اضافه کنید. خود فلش در حاشیه ایجاد می شود. این باعث می شود که راهنمای ابزار مانند حباب سخنرانی باشد.

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

.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% پیکان را در پایین راهنمایی قرار می دهد. سمت چپ: 50٪ فلش را مرکز می دهد.

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

رنگ حاشیه مورد استفاده برای تبدیل محتوای به یک فلش است. ما حاشیه بالا را به سیاه، و بقیه را به شفافیت تنظیم می کنیم. اگر تمام طرفها سیاه بودند، شما می توانید یک مربع سیاه را به پایان برسانید.

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

.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 اضافه کنید:

.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 اضافه کنید:

.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;
}

ظاهر شدن تدریجی Tooltip

اگر می خواهید در متن متن tooltip محو شود زمانی که آن را در مورد قابل مشاهده است، شما می توانید از ویژگی transition  انتقال CSS همراه با ویژگی opacity  استفاده کنید و از چندین ثانیه مشخص (1 ثانیه) در مثال ما):

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

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