U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
in English

Tilmaamaha Qalabka

Dukumeenti iyo tusaaleyaal lagu daro qalabka Bootstrap ee caadiga ah ee CSS iyo JavaScript iyadoo la adeegsanayo CSS3 animations iyo xogta-bs-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.jska kooban Popper si ay qalabku u shaqeeyaan!
  • Tilmaamaha aaladaha ayaa loo gatay 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 .disabledama disabledwalxaha 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.
Sida caadiga ah, qaybtani waxay isticmaashaa nadiifiyaha ku dhex jira, kaas oo ka saara wax kasta oo HTML ah oo aan si cad loo ogolayn. Faahfaahin dheeraad ah ka eeg qaybta fayadhowrka ee dukumeentiyada JavaScript .
Saamaynta animation ee qaybtani waxay ku xidhan tahay prefers-reduced-motionwaydiinta 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-bs-togglesifadooda:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Tusaalooyinka

Ka dul rog xiriirka hoose si aad u aragto qalabyada:

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. Tilmaamaha waa la milicsadaa marka la isticmaalayo Bootstrap gudaha RTL.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Iyo HTML caadadii lagu daray:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Sida SVG:

Sass

Kala duwanaansho

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

Isticmaalka

Plugin-ka Tooltip wuxuu soo saaraa nuxur iyo calaamadayn baahida, iyo sida caadiga ah wuxuu meeleeyaa tilmaamo qalab ka dib cunsurkooda kiciya.

Ku kiciya tilmaanta aalada JavaScript:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Qulqulka autoiyoscroll

Booska qalabku wuxuu isku dayaa inuu si toos ah u bedelo marka weelka waalidku haysto overflow: autoama overflow: scrolljecel yahay .table-responsive, laakiin wali wuxuu hayaa meelaynta asalka ah. Si aad tan u xalliso, u deji boundaryikhtiyaarka (loogu talagalay beddelaha beddelka adoo isticmaalaya popperConfigikhtiyaarka) HTMLElement kasta si aad uga gudubto qiimaha caadiga ah, 'clippingParents'sida document.body:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

Calaamadayn

Calaamadeynta loo baahan yahay ee qalab-tireedku waa datasifo kaliya oo titleqaybta 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 topplugin).

Samaynta qalabyada 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 joogsiga laga yaabo inay ka cadhaysiiyaan iyo jahawareer on walxaha aan is dhex galka lahayn ee isticmaaleyaasha kiiboodhka, iyo tignoolajiyada caawinta badankoodu hadda kuma dhawaaqaan aaladda xaaladdan. Intaa waxaa dheer, ha isku hallayn oo kaliya hoverinay tahay kiciye aaladdaada, maxaa yeelay tani waxay ka dhigaysaa aaladahaaga mid aan macquul ahayn inay kiciyaan isticmaaleyaasha kiiboodhka.

<!-- HTML to write -->
<a href="#" data-bs-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="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Curiyayaasha naafada

Qaybaha sifada leh disabledma 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 diiradda saaraya iyadoo la isticmaalayo tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-bs-, sida ku jira data-bs-animation="". Hubi inaad ka beddesho nooca kiiska ee magaca ikhtiyaarka ah ee geela una beddelo kiis kebab marka aad doorashooyinka ku gudbinayso sifooyinka xogta. Tusaale ahaan, halkii aad isticmaali lahayd data-bs-customClass="beautifier", isticmaal data-bs-custom-class="beautifier".

Ogsoonow in sababo ammaan dartood sanitize, sanitizeFn, iyo allowListikhtiyaarrada aan lagu bixin karin iyadoo la adeegsanayo sifooyinka xogta.
Magaca Nooca Asal ahaan Sharaxaada
animation booliyan true Codso u gudbida libdhicida CSS ilaa aaladda
container xadhig | element | been ah false

Waxay ku dhejisaa caarada aaladda shay gaar ah. Tusaale container: 'body':. Doorashadani waxay si gaar ah faa'iido u leedahay in ay kuu ogolaato inaad ku dhejiso qalabka wax lagu duubo ee qulqulka dukumeentiga u dhow curiyaha kiciya - taas oo ka ilaalin doonta qalabku inuu ka sabbeeyo xubinta kicinta inta lagu jiro cabbirka daaqada.

delay 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:delay: { "show": 500, "hide": 100 }

html booliyan false

Oggolow HTML in uu ku jiro tibaaxaha.

Haddi ay run tahay, HTML tags in tooltip's titlewaxaa lagu soo bandhigayaa qalab tip. Haddii ay been tahay, innerTexthantida waxaa loo isticmaali doonaa in lagu geliyo DOM.

Isticmaal qoraal haddii aad ka welwelsan tahay weerarrada XSS.

placement xadhig | shaqayn 'top'

Sida loo dhigo tip-tip - auto | sare | hoose | bidix | xaq.
Marka autola cayimo, waxay si firfircoon dib u habayn doontaa tibaaxaha qalabka.

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 thisguud waxa loo dejiyay tusaalaha tibaaxaha.

selector xadhig | been ah false 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.ontaageerada). Bal u fiirso tan iyo tusaale wargelin ah .
template xadhig '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML saldhig si aad u isticmaasho marka la abuurayo tip-ka.

Tilmaamaha qalabka titleayaa lagu duri doonaa .tooltip-inner.

.tooltip-arrowwaxay noqon doontaa fallaadho tibta aalada.

Cutubka duubka ugu dambeeya waa inuu lahaadaa .tooltipfasalka iyo role="tooltip".

title xadhig | element | shaqayn ''

Qiimaha cinwaanka caadiga ah haddii titlesifadu aanay jirin.

Haddii shaqo la bixiyo, waxa loo yeedhi doonaa iyada oo thistixraaceeda loo dejiyey curiyaha ay tip-ku ku dheggan tahay.

trigger xadhig 'hover focus'

Sida aaladda loo kiciyo - guji | dullid | diiradda | buug-gacmeedka. Waxaad ka gudbi kartaa kiciyeyaasha badan; kala saar meel bannaan.

'manual'waxay tusinaysaa in tibaaxaha qalabka lagu kicin doono barnaamij ahaan iyada oo loo marayo .show(), .hide()iyo .toggle()hababka; Qiimahan laguma dari karo kiciye kale.

'hover'Keligeed waxay keenaysaa tilmaamo aan lagu kicin karin kiiboodhka, waana in la isticmaalo oo keliya haddii habab kale oo loogu gudbinayo isla macluumaadka isticmaalayaasha kiiboodhka ay jiraan.

fallbackPlacements diyaarin ['top', 'right', 'bottom', 'left'] Qeex meelaynta dib u dhaca adiga oo siinaya liis meelayn ah (sida ay u kala door bidaan). Wixii macluumaad dheeraad ah tixraac dukumeentiyada dhaqanka Popper
boundary xadhig | curiye 'clippingParents' Xadka xad-dhaafka ah ee xaddidaadda qalabka (waxay khusaysaa kaliya Popper ka-hortagga qulqulka qulqulka). Sida caadiga ah waa 'clippingParents'oo aqbali kartaa tixraaca HTMLElement (iyada oo loo marayo JavaScript kaliya). Wixii macluumaad dheeraad ah tixraac Popper's detectOverflow docs .
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: 'class-1 class-2'.

Waxa kale oo aad gudbin kartaa hawl soo celinaysa hal xadhig oo ay ku jiraan magacyo dheeraad ah.

sanitize booliyan true Daar ama dami nadaafadda Haddii la hawlgeliyo 'template', 'title'xulashooyinkana waa la nadiifin doonaa. Ka eeg qaybta nadaafadda ee dukumeentiyada JavaScript .
allowList walax Qiimaha caadiga ah Shayga oo ka kooban sifooyin iyo calaamado la oggol yahay
sanitizeFn waxba | shaqayn null 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.
offset array | xadhig | shaqayn [0, 0]

Deminta tibaaxaha qalabka marka loo eego bartilmaameedkiisa. Waxaad ku gudbin kartaa xarkaha xogta sifooyin leh qiyam kala soocan sida:data-bs-offset="10,20"

Marka hawl loo isticmaalo in lagu go'aamiyo dhimista, waxa loogu yeedhaa shay ka kooban meelaynta popper, tixraaca, iyo popper rects sida doodiisa kowaad. Xubinta kicinta ee DOM node waxa loo gudbiyaa sidii doodda labaad. Shaqadu waa inay soo celisaa array leh laba lambar: .[skidding, distance]

Macluumaad dheeraad ah ka eeg dukumeentiyada dhimista ee Popper .

popperConfig waxba | shay | shaqayn null

Si aad u bedesho Bootstrap's default Popper config, arag qaabka Popper's .

Marka shaqada loo isticmaalo in lagu abuuro qaabaynta Popper, waxa loogu yeedhaa shay ka kooban qaabaynta Bootstrap ee caadiga ah ee Popper. Waxay kaa caawinaysaa inaad isticmaasho oo aad ku darto qaabka caadiga ah iyo qaabayntaada. Shaqadu waa inay soo celisaa shayga qaabaynta ee Popper.

Sifooyinka xogta ee aaladaha gaarka ah

Ikhtiyaarada aaladaha gaarka ah waxaa lagu qeexi karaa iyadoo la adeegsanayo sifooyinka xogta, sida kor lagu sharaxay.

Isticmaalka shaqada lehpopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

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 .

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.tooltipdhacdada dhicin). Tan waxa loo tixgaliyaa “handual” kicinta qalabka. Tilmaamaha qalabka leh cinwaanno eber ah weligood lama soo bandhigin.

tooltip.show()

qari

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.tooltipdhacdada dhicin). Tan waxa loo tixgaliyaa “handual” kicinta qalabka.

tooltip.hide()

leexleex

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.tooltipama hidden.bs.tooltipdhacdada dhicin). Tan waxa loo tixgaliyaa “handual” kicinta qalabka.

tooltip.toggle()

tuurid

Wuxuu qariyaa oo baabi'iyaa aaladda curiyaha (Waxay meesha ka saartaa xogta la kaydiyay ee cunsurka DOM). Aaladaha adeegsada ergada (kuwaaso la abuuray iyadoo la isticmaalayo ikhtiyaarka selector) si gaar ah looma baabi'in karo walxaha kiciya faraca.

tooltip.dispose()

awood

Waxay siisaa aalada curiyaha awoodda lagu tuso. Tilmaamaha qalabku waa la dajiyay.

tooltip.enable()

hawl gab

Waxay meesha ka saartaa awoodda qalabka curiyaha in la muujiyo. Qalabka tilmaanta waxa la tusi karaa oo keliya haddii dib loo hawlgeliyo.

tooltip.disable()

Daloola

Waxay beddeshaa awoodda aaladda curiyaha si loo muujiyo ama loo qariyo.

tooltip.toggleEnabled()

cusbooneysiin

Waxay cusboonaysiisaa booska tibaaxaha curiyaha.

tooltip.update()

heliTusaale

Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaalaha qalabaynta ee la xidhiidha curiyaha DOM

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

HelOrCreateInstance

Habka joogtada ah kaas oo kuu ogolaanaya inaad hesho tusaalaha qalabaynta ee la xidhiidha curiyaha DOM, ama abuurto mid cusub haddii aan la bilaabin

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Dhacdooyinka

Nooca dhacdada Sharaxaada
show.bs.tooltip Dhacdadani waxay isla markaaba gubataa marka showhabka tusaalaha la yiraahdo.
shown.bs.tooltip This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.tooltip This event is fired immediately when the hide instance method has been called.
hidden.bs.tooltip This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).
inserted.bs.tooltip This event is fired after the show.bs.tooltip event when the tooltip template has been added to the DOM.
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()