Tooltip in Bootstrap Bajardi: Sobirov Dostonjon Nomozboy o`g`li. Tekshirdi: Azimov Sarvar Ravshanbekovich

---

 
 

Tooltip in Bootstrap 
 
Bajardi:
Sobirov Dostonjon Nomozboy o`g`li.
 
Tekshirdi: 
Azimov Sarvar Ravshanbekovich.
2022

---

Tooltips 
Tooltip komponenti foydalanuvchi sichqoncha 
ko
ʻ
rsatgichini element ustida harakatlantirganda 
paydo bo
ʻ
ladigan kichik qalqib chiquvchi oynadir:

Maslahatni qanday yaratish kerak 
Maslahat yaratish uchun elementga data-bs-
toggle="tooltip" atributini qo'shing. 
Maslahat ichida ko'rsatilishi kerak bo'lgan 
matnni belgilash uchun sarlavha atributidan 
foydalaning: 
<
button
type
="button"
class
="btn btn-primary"
data-bs-toggle
="tooltip"
title
="Hooray!"> 
Hover over me!
<
/button
> 

---

Eslatma: 
Ishlash uchun maslahatlar JavaScript bilan ishga 
tushirilishi kerak. 
Quyidagi kod hujjatdagi barcha maslahatlarni 
faollashtiradi: 
 
 
 
 
 
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
rel="stylesheet"> 
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
> 
 
 

 

MISOL UCHUN:

title="SHOSHILINCH XABAR!"> 
MASLAXAT 
 

 

 

Joylashtirish bo'yicha Tooltip lar:

 
Data-bs-placement atributi asboblar maslahati o'rnini belgilaydi..
<
a
href
="#"
data-bs-toggle
="tooltip"
data-bs-placement
="top"
title
="
Tepa
!">
Tepa
<
/a
>
<
a
href
="#"
data-bs-toggle
="tooltip"
data-bs-placement
="bottom"
title
="
Past
!">
Past
<
/a
>
<
a
href
="#"
data-bs-toggle
="tooltip"
data-bs-placement
="left"
title
="
Chap
!">
Chap
<
/a
>
<
a
href
="#"
data-bs-toggle
="tooltip"
data-bs-placement
="right"
title
="
O`ng
!">
O`ng
<
/a
>