ورود به کارتابل مشتریان وب مهراز
ابزار راهنما (tooltip) در CSS
یادگیری 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 در دروس مربوط به آنها یاد خواهید گرفت.
نظر شما
>