آموزش راهنمای CSS

13 جولای 2021

سسبا 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>

مثال توضیح داده شده

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

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

CSS:tooltip استفاده در کلاس position:relative، که به موقعیت متن راهنمای ابزار مورد نیاز است ( position:absolute). توجه: به مثالهای زیر در مورد نحوه قرار دادن راهنمای ابزار مراجعه کنید.

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

از border-radiusویژگی CSS برای افزودن گوشه های گرد به متن راهنمای ابزار استفاده می شود.

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


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

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

نکته درست

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

راهنمای چپ

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

اگر می خواهید راهنمای ابزار در بالا یا پایین نمایش داده شود ، به مثال های زیر مراجعه کنید. توجه داشته باشید که ما از margin-leftویژگی با ارزش منهای 60 پیکسل استفاده می کنیم. این کار برای قرار دادن راهنمای ابزار در بالا / زیر متن قابل انعطاف است. روی نیمی از عرض نوار ابزار تنظیم شده است (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 */
}


فلش های راهنما

برای ایجاد پیکان که باید از سمت خاصی از نوار ابزار ظاهر شود ، محتوای “خالی” را بعد از راهنمای ابزار ، با کلاس عنصر شبه ::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%پیکان را در پایین راهنمای ابزار قرار می دهد. left: 50%پیکان را متمرکز خواهد کرد.

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

border-colorاستفاده می شود برای تبدیل مطالب را به فلش. حاشیه بالا را سیاه و بقیه را شفاف قرار می دهیم. اگر همه طرفها سیاه باشد ، در آخر یک جعبه مربع مشکی رنگ خواهید داشت.

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

پیکان بالا

.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 In Tooltips (انیمیشن)

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

مثال

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

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

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.