CSS tooltiplar
CSS maslahat oynasi (tooltip)
CSS tooltip foydalanuvchi sichqoncha ko‘rsatgichini element ustiga olib borganda biror narsa haqida qo‘shimcha ma’lumot berish uchun ishlatiladi:
CSS bilan oddiy tooltip yaratish
Foydalanuvchi sichqonchani element ustiga olib borganda paydo bo‘ladigan tooltip yarating:
Misol
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* Add dots under the hoverable text */
cursor: pointer;
}
/* Tooltip text
*/
.tooltiptext {
visibility: hidden; /*
Hidden by default */
width: 130px;
background-color: black;
color: #ffffff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1; /* Ensure tooltip is displayed above
content */
}
/* Show
the tooltip text on hover */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover
over me
<span class="tooltiptext">Some
tooltip
text</span>
</div>
O‘zingiz sinab ko‘ring »
Misol tahlili
HTML:
- Konteyner elementdan (masalan <div>) foydalanib, unga
"tooltip"klassini qo‘shing. Foydalanuvchi sichqonchani bu <div> ustiga olib borganda tooltip matni ko‘rsatiladi. - Tooltip matni
class="tooltiptext"li inline element ichiga (masalan <span>) joylashtiriladi.
CSS:
tooltipklassiposition:relativeishlatadi, bu tooltip matnini (position:absolute) joylashtirish uchun kerak. Maslahat: Tooltipni joylashtirish usullari uchun quyidagi misollarga qarang.tooltiptextklassi haqiqiy tooltip matnini saqlaydi. U standart holatda yashirin va hover qilinganda ko‘rinadi.:hoverselektori foydalanuvchi sichqonchaniclass="tooltip"li <div> ustiga olib borganda tooltip matnini ko‘rsatish uchun ishlatiladi.
Tooltip joylashuvini belgilash
Tooltipni xohlaganingizcha joylashtirishingiz mumkin. Bu yerda tooltipni chapga, o‘ngga, tepaga va pastga joylashtirishni ko‘rsatamiz.
O‘ng va chapga tekislangan tooltip
Bu misolda tooltip "hoverable" matndan (<div>) o‘ngga (left:105%) joylashtirilgan. Shuningdek, uni konteyner elementining o‘rtasiga joylashtirish uchun top:-5px
Misol
Right-aligned tooltip:
.tooltiptext {
top: -5px;
left:
105%;
}
Natija:
Misol
Left-aligned tooltip:
.tooltiptext {
top: -5px;
right:
105%;
}
Natija:
Yuqori va pastga tekislangan tooltip
Tooltip tepada yoki pastda paydo bo‘lishini xohlasangiz, quyidagi misollarga qarang. margin-left xossasini minus 65 piksel qiymat bilan ishlatganimizga e’tibor bering. Bu tooltipni hoverable matnning yuqorisiga/pastiga markazlashtirish uchun. U tooltip kengligining yarmiga teng (130/2 = 65).
Misol
Top-aligned tooltip:
.tooltiptext {
width: 130px;
bottom: 100%;
left:
65%;
margin-left: -65px; /* Use half of the width
(130/2 = 65), to center the tooltip */
}
Natija:
Misol
Bottom-aligned tooltip:
.tooltiptext {
width: 130px;
top: 100%;
left:
50%;
margin-left: -65px; /* Use half of the width
(130/2 = 65), to center the tooltip */
}
Natija:
Asta paydo bo‘luvchi tooltip
Sokin paydo bo‘ladigan tooltip kerak bo‘lsa, CSS transition xossasi va opacity xossasidan foydalanib, ko‘rsatilgan sekundlar davomida (bizning misolda 2 sekund) butunlay ko‘rinmas holatdan 100% ko‘rinadigan holatga o‘tishni ta’minlang:
Misol
.tooltiptext {
opacity: 0;
transition: opacity 2s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!