Tilmaamaha Qalabka
Dukumeenti iyo tusaaleyaal lagu daro qalabka Bootstrap ee gaarka ah CSS iyo JavaScript iyadoo la adeegsanayo CSS3 animations iyo xogta sifada kaydinta cinwaanka maxalliga ah.
Dulmar
Waxyaabaha ay tahay in la ogaado marka la isticmaalayo Tooltip plugin:
- Tilmaamaha qalabku waxay ku tiirsan yihiin qaybta 3aad ee maktabadda Popper si loo meeleeyo. Waa in aad ku darto popper.min.js ka hor bootstrap.js ama isticmaal
bootstrap.bundle.min.js
/bootstrap.bundle.js
ka kooban Popper si ay qalabku u shaqeeyaan! - Haddii aad JavaScript-kayaga ka dhisayso isha, waxay u baahan tahay
util.js
. - Tilmaamaha aaladaha ayaa loo galey sababo waxqabad dartood, marka waa inaad adigu bilowdaa .
- Tilmaamaha qalabka leh cinwaanno eber ah weligood lama soo bandhigin.
- Qeex
container: 'body'
si aad uga fogaato soo jeedinta dhibaatooyinka qaybo badan oo kakan (sida kooxahayada wax gelinta, kooxaha badhanka, iwm). - Qalab kicinta walxaha qarsoon ma shaqayn doonaan.
- Tilmaamaha aaladaha
.disabled
amadisabled
walxaha waa in lagu kiciyaa curiyaha duubka ah. - Marka laga soo kiciyo hyperlinks kuwaas oo fidsan xariiqyo badan, tabaha aaladaha ayaa dhexda u ahaan doona. Isticmaal s si
white-space: nowrap;
aad<a>
uga fogaato dhaqankan. - Tilmaamaha qalabka waa in la qariyaa ka hor inta aan laga saarin walxaha u dhigma ee DOM.
- Tilmaamaha aaladaha waa la kicin karaa iyada oo ay ugu wacan tahay shay ku jira hadhka DOM.
prefers-reduced-motion
waydiinta warbaahinta. Eeg
qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .
Waxaas oo dhan ma helay? Way fiicantahay, aan aragno sida ay ula shaqeeyaan tusaalooyinka qaar.
Tusaale: Dari tilmaanta aaladaha meel kasta
Hal dariiqo oo lagu bilaabi karo dhammaan qalabyada bogga waxay noqon kartaa in lagu xusho data-toggle
sifadooda:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Tusaalooyinka
Ka dul rog xiriirka hoose si aad u aragto aaladaha:
Qoraalka meeleeyaha si aad u muujiso qaar ka mid ah xidhiidhada khadka ee leh qalabyada Kani hadda waa uun wax-buuxiyaha, ma jiro dilaa. Nuxurka halkan loo dhigay si loogu ekaysiiyo joogitaanka qoraalka dhabta ah . Oo waxaas oo dhan si ay fikrad kuu siiyaan sida qalabku u ekaan lahaa marka loo isticmaalo xaaladaha dhabta ah ee aduunka. Markaa waxaan rajaynaynaa inaad hadda aragtay sida qalabkan xidhiidhiyayaashu ugu shaqayn karaan si dhab ah, marka aad ku isticmaasho goobtaada ama mashruucaaga.
Dul bood badhamada hoose si aad u aragto afarta tilmaamood ee tilmaamaha: sare, midig, hoose, iyo bidix.
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Iyo HTML caadadii lagu daray:
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Isticmaalka
Plugin-ka Tooltip waxa uu abuuraa nuxur iyo calaamadayn baahida, iyo sida caadiga ah waxa uu meeleeyaa tilmaamaha qalabka ka dib cunsurkooda kiciya.
Ku kiciya tilmaanta aalada JavaScript:
$('#example').tooltip(options)
Qulqulka auto
iyoscroll
Booska qalabku wuxuu isku dayaa inuu si toos ah u bedelo marka weelka waalidku haysto overflow: auto
ama overflow: scroll
jecel yahay .table-responsive
, laakiin wali wuxuu hayaa meelaynta asalka ah. Si loo xalliyo, u deji boundary
ikhtiyaarka wax kasta oo aan ahayn qiimaha caadiga ah, 'scrollParent'
sida 'window'
:
$('#example').tooltip({ boundary: 'window' })
Calaamadayn
Calaamadeynta loo baahan yahay ee qalab-tireedku waa data
sifo kaliya oo title
qaybta HTML ee aad rabto inaad haysato qalab. Astaanta la soo saaray ee tilmaanta qalabku waa mid fudud, in kasta oo ay u baahan tahay boos (sida caadiga ah, oo loo dejiyay top
plugin).
Samaynta tibaaxaha aaladaha u shaqeeya kiiboodhka iyo isticmaalayaasha tignoolajiyada caawiya
Waa inaad ku darto oo kaliya qalabyada curiyayaasha HTML kuwaas oo dhaqan ahaan kiiboodhka diirada saaraya iyo is dhexgal (sida isku xidhka ama kontaroolada foomka). In kasta oo walxaha HTML ee gardarrada ah (sida <span>
s) laga dhigi karo mid diiradda lagu saari karo iyada oo lagu darayo sifada tabindex="0"
, tani waxay ku dari doontaa joogsiyada suurtagalka ah ee xanaaqa iyo jahawareerinta ee walxaha aan is-dhexgal ahayn ee isticmaalayaasha kiiboodhka, iyo inta badan tignoolajiyada caawinta hadda kuma dhawaaqaan aaladda xaaladdan. Intaa waxaa dheer, ha isku hallayn oo kaliya hover
inay tahay kiciye aaladdaada, maxaa yeelay tani waxay ka dhigaysaa aaladahaaga mid aan macquul ahayn inay kiciyaan isticmaaleyaasha kiiboodhka.
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
Curiyayaasha naafada
Qaybaha sifada leh disabled
ma aha kuwo is dhexgal ah, taasoo la micno ah in isticmaalayaashu aanay diiradda saari karin, kor u qaadi karin, ama aanay gujin karin si ay u kiciyaan qalab (ama popover). Xakameyn ahaan, waxaad u baahan doontaa inaad ka kiciso qalabka wax lagu duubo <div>
ama <span>
, sida habboon loo sameeyay kiiboodhka diirada saaraya tabindex="0"
, oo aad ka gudubto pointer-events
qaybta naafada ah.
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
Ikhtiyaarada
Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-
, sida ku jira data-animation=""
.
sanitize
,
sanitizeFn
iyo
whiteList
ikhtiyaarrada aan lagu bixin karin iyadoo la adeegsanayo sifooyinka xogta.
Magaca | Nooca | Asal ahaan | Sharaxaada |
---|---|---|---|
animation | booliyan | run | Codso u gudbida libdhicida CSS ilaa aaladda |
weel | xadhig | element | been ah | been ah | Waxay ku dhejisaa caarada aaladda shay gaar ah. Tusaale |
dib u dhac | lambarka | walax | 0 | Daahinta muujinta iyo qarinta aaladda (ms) - kuma khusayso nooca kiciya gacanta Haddii nambar la keeno, dib u dhac ayaa lagu dabaqayaa qarinta/muujinta labadaba Qaab dhismeedka shaygu waa: |
html | booliyan | been ah | Oggolow HTML in uu ku jiro tibaaxaha. Haddi ay run tahay, HTML tags in tooltip's Isticmaal qoraal haddii aad ka welwelsan tahay weerarrada XSS. |
meelaynta | xadhig | shaqayn | 'sare' | Sida loo dhigo tip-tip - auto | sare | hoose | bidix | xaq. Marka hawl loo isticmaalo si loo go'aamiyo meelaynta, waxa loogu yeedhaa qalabka DOM node oo ah doodiisa koowaad iyo curiyaha DOM node oo ah kan labaad. Macnaha |
dooriye | xadhig | been ah | been ah | Haddii la bixiyo doorasho, walxaha tibaaxaha ah waxaa loo igman doonaa bartilmaameedyada la cayimay. Ficil ahaan, tan waxaa sidoo kale loo isticmaalaa in lagu dabaqo aaladaha aaladaha si firfircoon loogu daray walxaha DOM ( jQuery.on taageerada). Bal tan iyo tusaale wargelin ah eeg . |
template | xadhig | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Saldhig HTML si aad u isticmaasho marka la abuurayo tip-ka. Tilmaamaha qalabka
Cutubka duubka ugu dambeeya waa inuu lahaadaa |
horyaalka | xadhig | element | shaqayn | '' | Qiimaha cinwaanka caadiga ah haddii Haddii shaqo la bixiyo, waxa loo yeedhi doonaa iyada oo |
kicin | xadhig | 'fiirsashada dulsaarka' | Sida aaladda loo kiciyo - guji | dullid | diiradda | buug-gacmeedka. Waxaad ka gudbi kartaa kiciyeyaasha badan; meel bannaan ku kala saar.
|
dhimis | lambarka | xadhig | shaqayn | 0 | Deminta tibaaxaha qalabka marka loo eego bartilmaameedkiisa. Marka shaqada loo isticmaalo in lagu go'aamiyo dhimista, waxaa loogu yeeraa shay ay ku jiraan xogta la dhimay sida doodeeda koowaad. Shaqadu waa in ay soo celisaa shay leh qaab isku mid ah. Xubinta kicinta ee DOM node waxa loo gudbiyaa sidii doodda labaad. Macluumaad dheeraad ah ka eeg dukumeentiyada dhimista ee Popper . |
fallbackPlacement | xadhig | diyaarin | 'rogid' | Oggolow inuu caddeeyo booska Popper uu isticmaali doono dib-u-dhaca. Wixii macluumaad dheeraad ah tixraac dukumeentiyada dhaqanka Popper |
CustomClass | xadhig | shaqayn | '' | Casharo ku dar tilmaanta qalabka marka la tuso. Ogsoonow in fasalladan lagu dari doono marka lagu daro fasal kasta oo lagu qeexay qaab-dhismeedka. Si loogu daro fasalo badan, ku kala saar meelo banaan: Waxa kale oo aad gudbin kartaa hawl soo celinaysa hal xadhig oo ay ku jiraan magacyo dheeraad ah. |
xuduud | xadhig | curiye | 'kor u qaadida waalidka' | Xadka xad-dhaafka ah ee xaddidaadda qalabka. Aqbala qiyamka 'viewport' , 'window' , 'scrollParent' , ama tixraaca HTMLElement (JavaScript kaliya). Macluumaad intaas ka badan waxaad eegtaa dukumeentiyada Popper ee ka hortagga qulqulka . |
nadaafadda | booliyan | run | Daar ama dami nadaafadda Haddii la hawlgeliyo 'template' , 'title' xulashooyinkana waa la nadiifin doonaa. Ka eeg qaybta nadaafadda ee dukumeentiyada JavaScript . |
Liis cad | walax | Qiimaha caadiga ah | Shayga oo ka kooban sifooyin iyo calaamado la oggol yahay |
nadaafaddaFn | waxba | shaqayn | waxba | Halkan waxa aad ku keeni kartaa shaqadaada nadaafadda. Tani waxay noqon kartaa mid faa'iido leh haddii aad doorbidayso inaad isticmaasho maktabad gaar ah si aad u sameyso nadaafadda. |
popperConfig | waxba | walax | waxba | Si aad u bedesho Bootstrap's default Popper config, arag qaabka Popper |
Sifooyinka xogta ee aaladaha gaarka ah
Ikhtiyaarada aaladaha gaarka ah waxaa lagu qeexi karaa iyadoo la adeegsanayo sifooyinka xogta, sida kor lagu sharaxay.
Hababka
Hababka iyo kala-guurka aan isku midka ahayn
Dhammaan hababka API waa isku mid waxayna bilaabaan kala-guurka . Waxay ku soo noqdaan qofka soo wacaya isla markii uu bilaabmo kala-guurka laakiin ka hor inta uusan dhammaan . Intaa waxaa dheer, hab ku baaqaya in qayb ka beddelka waa la iska indhatiray .
Ka eeg dukumeentiyada JavaScript wixii macluumaad dheeraad ah .
$().tooltip(options)
Wuxuu ku lifaaqaa gacan hayaha qalab ururinta walxaha.
.tooltip('show')
Waxay daaha ka qaadaysaa aaladda curiyaha Ku soo noqda qofka soo wacay ka hor inta aan aalada qalabku dhab ahaan la muujin (tusaale ka hor intaanay shown.bs.tooltip
dhacdada dhicin). Tan waxa loo tixgaliyaa “handual” kicinta qalabka. Tilmaamaha qalabka leh cinwaanno eber ah weligood lama soo bandhigin.
$('#element').tooltip('show')
.tooltip('hide')
Wuxuu qariyaa calaamadda curiyaha. Ku soo noqda qofka soo wacay ka hor inta aan la qarin qalabka wax lagu qoro (tusaale ka hor intaanay hidden.bs.tooltip
dhacdada dhicin). Tan waxa loo tixgaliyaa “handual” kicinta qalabka.
$('#element').tooltip('hide')
.tooltip('toggle')
Beddelayaa shay raadka. Ku soo noqda qofka soo wacay ka hor inta aan aalada qalabku dhab ahaan la muujin ama la qarin (tusaale ka hor inta aanay dhacdada shown.bs.tooltip
ama hidden.bs.tooltip
dhacdada dhicin). Tan waxa loo tixgaliyaa “handual” kicinta qalabka.
$('#element').tooltip('toggle')
.tooltip('dispose')
Qariyaa oo baabi'iyaa aaladda curiyaha. Aaladaha isticmaala ergada (kuwaaso la abuuray iyadoo la isticmaalayo ikhtiyaarka selector
) si gaar ah looma baabi'in karo walxaha kiciya faraca.
$('#element').tooltip('dispose')
.tooltip('enable')
Waxay siisaa aalada curiyaha awoodda lagu tuso. Tilmaamaha qalabku waa la dajiyay.
$('#element').tooltip('enable')
.tooltip('disable')
Waxay meesha ka saartaa awoodda qalabka curiyaha in la muujiyo. Qalabka tilmaanta waxa la tusi karaa oo keliya haddii dib loo hawlgeliyo.
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
Waxay beddeshaa awoodda aaladda curiyaha si loo muujiyo ama loo qariyo.
$('#element').tooltip('toggleEnabled')
.tooltip('update')
Waxay cusboonaysiisaa booska tibaaxaha curiyaha.
$('#element').tooltip('update')
Dhacdooyinka
Nooca Dhacdada | Sharaxaada |
---|---|
show.bs.tooltip | Dhacdadani waxay isla markaaba gubataa marka show habka tusaalaha la yiraahdo. |
tusay.bs.tooltip | Dhacdadan waxa la eryaa marka tip-tip-ka loo dhigay mid la arki karo isticmaaluhu (waxay sugi doontaa inta uu CSS ka gudbayo dhamaystirka). |
qari.bs.tooltip | Dhacdadan ayaa isla markaaba la eryaa marka hide habka tusaale ahaan loo waco. |
qarsoon.bs.tooltip | Dhacdadan waxa la eryaa marka qalabku dhammeeyo in laga qariyo isticmaalaha (waxa ay sugi doontaa inta uu CSS ka gudbayo dhamaystirka). |
la geliyey.bs.tooltip | Dhacdadan ayaa la eryaa dhacdada ka dib show.bs.tooltip marka qaabka qalabaynta lagu daro DOM. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})