Tooltip strelkalari

Tooltipning muayyan tomonidan ko‘rinadigan o‘q (arrow) yaratish uchun tooltipdan keyin ::after psevdo-element klassini content xossasi bilan birga ishlatib "bo‘sh" kontent qo‘shing. O‘qning o‘zi chegaralar yordamida yaratiladi. Bu tooltipni nutq pufakchasi ko‘rinishiga keltiradi.

Bu misol tooltipning pastki qismiga o‘q qo‘shishni ko‘rsatadi:

Pastki strelka

.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;
}

Natija:

O‘zingiz sinab ko‘ring »

Misol tahlili

O‘qni tooltip ichiga joylashtirish: top: 100% o‘qni tooltipning pastki qismiga joylashtiradi. left: 50% o‘qni markazga keltiradi.

Eslatma: border-width xossasi o‘qning o‘lchamini belgilaydi. Buni o‘zgartirsangiz, margin-left qiymatini ham xuddi shunday o‘zgartiring. Bu o‘qni markazda saqlaydi.

border-color kontentni o‘qqa aylantirish uchun ishlatiladi. Yuqori chegarani qora, qolganlarini shaffof qilib belgilaymiz. Agar barcha tomonlar qora bo‘lsa, qora kvadrat quti hosil bo‘lardi.

Bu misol tooltipning yuqori qismiga o‘q qo‘shishni ko‘rsatadi. Bu safar pastki chegara rangini belgilaganimizga e’tibor bering:

Yuqori strelka

.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;
}

Natija:

O‘zingiz sinab ko‘ring »

Bu misol tooltipning chap tomoniga o‘q qo‘shishni ko‘rsatadi:

Left Arrow (chap strelka)

.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;
}

Natija:

O‘zingiz sinab ko‘ring »

Bu misol tooltipning o‘ng tomoniga o‘q qo‘shishni ko‘rsatadi:

Right Arrow (o‘ng strelka)

.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;
}

Natija:

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish