021-20483015

ابزار راهنما (tooltip) در CSS

زمانی که به نمایش اطلاعات اضافی در مورد چیزی نیاز داریم ، از این ابزار استفاده میکنیم. اطلاعات اضافه زمانی که کاربر با ماوس بر روی عنصر مورد نظر اشاره می کند ، نمایش داده می شود.
 

ابزار راهنمای پایه

در مثال زیر ابزار راهنمایی اضافه می کنیم که با اشاره ماوس بر روی یک عنصر ، ظاهر می شود.

مثال :

ابزار راهنمایی پایه
<style>
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* متن ابزار راهنما*/
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* موقعیت دهی متن - مثال های زیر با ببینید */
    position: absolute;
    z-index: 1;
}

/* نمایش متن ابزار راهنما به هنگام اشاره ماوس بر روی عنصر نگه دارنده */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
مشاهده مثال


تشریح مثال بالا :

HTML - از یک عنصر نگهدارنده مانند div استفاده کرده ایم و یک کلاس با نام "tooltip" به آن اضافه کرده ایم. زمانی که کاربر بر روی <div> اشاره کند ، متن راهنما نمایش داده می شود.
متن راهنما داخل یک عنصر اینلاین مانند span که دارای کلاس "tooltiptext" است ، قرار می گیرد.

CSS - کلاس tooltip از position:relative استفاده می کند و برای تعیین موقعیت متن راهنما که خود دارای position:absolute می باشد ، نیاز است.

نکته !  مثال زیر را برای یادگیری نحوه موقعیت دهی راهنما ، مشاهده کنید.

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

صفت border-radius (در CSS3) نیز برای انحنا دادن به گوشه های باکس راهنما استفاده شده است.
سلکتور hover: را نیز اضافه کرده ایم تا زمانی که کاربر بر روی div دارای کلاس "tooltip اشاره می کند ، متن راهنما نمایش داده شود.

 

موقعیت دهی راهنما

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

متن راهنما در سمت راست :

ابزار راهنمای سمت راست
.tooltip .tooltiptext {
    top: -5px;
    left: 105%;
}
مشاهده مثال


متن راهنما در سمت چپ :

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



اگر می خواهید متن راهنما در بالا یا پایین قرار گیرد ، مثال های زیر را به دقت مشاهده کنید. توجه کنید که در این مثال از margin-left با مقدار منفی 60 پیکسل استفاده کرده ایم تا آن را در وسط بالا یا پایین متن قابل اشاره قرار دهیم. این مقدار در اصل نصف مقدار عرض راهنما می  باشد.

مثال متن راهنما در بالا :

ابزار راهنمای بالا
.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; /* برای موقعیت دهی وسط چین ابزار راهنما از نصف عرض استفاده کنید (120/2 = 60)*/
}
مشاهده مثال



مثال متن راهنما در پایین :

ابزار راهنمای پایین
.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left: 50%;
    margin-left: -60px; /* برای موقعیت دهی وسط چین ابزار راهنما از نصف عرض استفاده کنید (120/2 = 60)*/
}
مشاهده مثال



 

تیزی روی باکس راهنما

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

مثال :

تیزی پایین باکس راهنما
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* در زیر باکس راهنما */
    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 برای پر کردن داخل تیزی استفاده می شود. در اصل خط حاشیه بالا را مشکی تنظیم کرده ایم و به باقی خطوط مقدار transparent را اضافه کرده ایم. اگر همه آنها را بر روی مشکی تنظیم کنیم ، تیزی به مربعی مشکی تبدیل می شود.

در مثال زیر نحوه اضافه کردن تیزی به بالا باکس راهنما نمایش داده شده است. توجه کنید که اینبار به خط حاشیه پایین ، رنگ می دهیم.

مثال :
تیزی بالای باکس راهنما
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* در زیر باکس راهنما */
    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%; /* در سمت چپ باکس راهنما */
    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%; /* در سمت راست باکس راهنما */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}
مشاهده مثال

 

نمایش تدریجی متن راهنما ( fade )

اگر میخواهید به هنگام نمایش راهنما ، به صورت تدریجی نمایش داده شود (دارای انیمیشن باشد) می توانید از صفت transition (در CSS3) به همراه صفت opacity استفاده کنید و مدت زمان آن را نیز تعیین کنید. (در مثال زیر زمان انیمیشن یک ثانیه است)

مثال :

ظهور باکس راهنما
.tooltip .tooltiptext {
    opacity: 0;
    transition: opacity 1s;
}

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



نکته ! شما درباره transition و animation در دروس مربوط به آنها یاد خواهید گرفت.

 

نظر شما

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

یادگیری CSS

مقالات و دروس

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

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

مقالات مرتبط