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

راهنمای ابزار CSS به یک پیام پنجره ای اشاره دارد که پس از شناور موشواره یا هنگامی که عناصر تمرکز صفحه کلید را نشان می دهند ، ظاهر می شود. با خارج شدن ماوس یا وقتی عنصر تمرکز صفحه کلید را از دست می دهد ، ناپدید می شود.

ایجاد راهنمایی های ابزار با CSS

ایجاد یک راهنمای CSS خالص برای یک عنصر امکان پذیر است. با این حال ، اولین قدم ساختن یک راهنمای HTML با اختصاص کلاس به عنصری است که دارای راهنمای ابزار است.

سپس ، از ویژگی های یک ظاهر طراحی CSS استفاده می کنید. راهنمای ارائه شده در مثال زیر دارای موقعیت ، رنگ و ویژگی های نمایش است.

.tooltip { /* Container for our tooltip */
    position: relative;   
    display: inline-block;
}

.tooltip .tooltiptext { /* This is for the tooltip text */
    visibility: hidden;
    width: 100px;
    background-color: #8512d5;
   color: white;
   text-align: center;
   padding: 10px;
   border-radius: 10px;  /* This defines tooltip text position */
   position: absolute;
   z-index: 1;
} 

.tooltip:hover .tooltiptext { /* Makes tooltip text visible when text is hovered on */
   visibility: visible;
}

متن نکته در داخل عنصر <span> با کلاس ابزار ابزار قرار دارد.

توجه: راهنمای ابزار برای تنظیم اطلاعات اضافی در مورد یک موضوع است که کاربران نشانگر ماوس را روی عناصر مدل دار قرار می دهند.

مراحل ایجاد برای ایجاد یک راهنمای ابزار خالص CSS

با HTML ، ما فقط عناصر را با متن اضافه می کنیم. CSS موقعیت ، رنگ و سایر خصوصیات را برای راهنمای ابزار تعیین می کند.

• ما موقعیت را نسبت به عنصر با کلاس tooltip تنظیم می کنیم.
• متن را در داخل راهنمای ابزار با موقعیت: مطلق قرار می دهیم.
• عنصر دارای کلاس tooltiptext متن داخل مقاله را دارد. این پنهان است تا زمانی که: شناور باعث می شود.
• CSS با مشخص کردن عرض آن و رنگ پس زمینه ، نکات مهم HTML را سبک می کند.
• متن داخل راهنمای مرکز متمرکز است و دارای تنظیمات مخصوص پر کردن است.
• شعاع حاشیه گوشه های راهنمای HTML را دور می زند.

تثبیت موقعیت

می توانید یک راهنمای ابزار CSS را در یکی از چهار طرف یک عنصر HTML قرار دهید.

راهنمای راست

مثال زیر با استفاده از ویژگی سمت چپ با موقعیت: relative (جهت حرکت به سمت راست) ، راهنمای ابزار را در سمت راست متن قابل حمل قرار می دهد.

.tooltip-ex-right {
    top: -5px;
    left: 125%;
}

نکته: ما از top: -5px برای انتقال نکات CSS به همان ارتفاع ظرف استفاده می کنیم.

با افزایش padding ، ممکن است لازم باشد که مقدار خاصیت بالا را افزایش دهید تا اطمینان حاصل شود که به صورت عمودی در مرکز قرار دارد.

راهنمای چپ

ایجاد راهنمای HTML در سمت چپ شامل استفاده از راست با موقعیت: نسبی است.

.tooltip .tooltiptext {
    top: -10px;
    right: 110%; 
}

نکته برتر

مثال زیر راهنمای HTML را در بالای عنصر اضافه می کند:

.tooltip .tooltiptext {
    top: -10px;
    right: 110%; 
}

توجه: ما از ویژگی margin-left با -60 برای قرار دادن راهنمای ابزار استفاده می کنیم.

راهنمای پایین

در اینجا مثالی از راهنمای CSS پایین آورده شده است:

.tooltip .tooltiptext {
    width: 100px;
    bottom: 100%;    
    left: 50%;
    margin-left: -50px; /* This makes the margin half of the width to the center */
}

نکته: فراموش نکنید که حاشیه چپ را وارد کنید و مقدار آن را روی -60 قرار دهید تا راهنمای ابزار قرار گیرد.

ایجاد یک پیکان

با ترکیب عنصر شبه :: بعد و یک ویژگی محتوای خالی می توانید برای راهنمای ابزار خود پیکان ایجاد کنید. در نتیجه ، راهنمای ابزار شبیه حباب گفتار است.

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* This will position the arrow at the bottom of the tooltip */
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: black transparent transparent transparent; /* This will make the top border black*/
}

مثال بالا برای ایجاد یک پیکان برای یک راهنمای ابزار در پایین قرار دارد ، این مراحل را دنبال می کند:

• هیچ ویژگی منحصر به فردی برای ایجاد فلش برای راهنمای ابزار وجود ندارد. بنابراین ، ما از ویژگی مرز استفاده خواهیم کرد.
• باید فلش را در قسمت پایین با تنظیم بالا قرار دهیم: 100٪.
• سمت چپ: 50٪ بخش کد ، نکات مهم را مرکز می کند.
• عرض حاشیه اندازه پیکان را تعیین می کند. اگر اندازه را تغییر دهید ، باید حاشیه چپ را نیز تغییر دهید تا پیکان در مرکز قرار بگیرد.
• رنگ حاشیه رنگ پیکان را تنظیم می کند. شما فقط باید مرز بالا را مشخص کنید و مرزهای دیگر را شفاف بگذارید.
• شما باید سبک حاشیه را تنظیم کنید تا نحوه به نظر رسیدن مرز مشخص شود. مثال از مقدار جامد استفاده می کند.

مثال زیر نحوه ایجاد پیکان برای نوک ابزار واقع در بالا را نشان می دهد:

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* This will position the arrow at the top of the tooltip */
    left: 50%;
    margin-left: -10px;    
    border-width: 10px;
    border-style: solid; 
    border-color: transparent transparent black transparent; /* This will make the top border black */
}

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

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* This will position the arrow on the left of the tooltip */
    margin-top: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent black transparent transparent; /* This will make the right border black*/
}

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

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* This will position the arrow on the right of the tooltip */
    margin-top: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent black; /* This will make the left border black*/
}

محو شدن در انیمیشن

Fade In Tooltip

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

در مثال ، ما یک اثر محو شدن نرم ایجاد می کنیم:

.tooltip .tooltiptext {
    opacity: 0; /* This will make the tooltip text invisible when it's not being hovered on */
    transition: opacity 3s;
}
.tooltip:hover .tooltiptext {
    opacity: 1;
} /* This will make it fade in when it's hovered on */

• ما باید opacity: 0 را برای زمان پنهان بودن راهنمای ابزار تنظیم کنیم.
• ویژگی انتقال باید مدت زمان انیمیشن را نشان دهد.
• ما باید opacity: 1 را به راهنمای ابزار برای وقتی: شناورها اضافه کنیم.

نکات مهم راهنمای ابزار CSS:

• یکی از نگرانی های استفاده از راهنمایی ها این است که ممکن است کاربران دستگاه های تلفن همراه نتوانند از این ویژگی استفاده کنند.
• با استفاده از منابع Bootstrap می توانید نکات ابزار را ایجاد کنید.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.