021-20483015

Tooltip در CSS

ایجاد Tooltip با CSS

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

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در راست
.tooltip .tooltiptext {
    top: -5px;
    left: 105%;
}
مشاهده مثال

tooltipدر چپ
.tooltip .tooltiptext {
    top: -5px;
    right: 105%;
}
مشاهده مثال

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

tooltipدر بالا
.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
مشاهده مثال

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
.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
.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
.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
.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
.tooltip .tooltiptext {
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    opacity: 1;
}
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط