Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
in English

Gorsa Meeshaalee

Galmee fi fakkeenyota gorsa meeshaalee Bootstrap amala CSS fi JavaScript waliin CSS3 fayyadamuun sochiiwwanii fi data-bs-attributes kuusaa mata duree naannoodhaaf dabaluudhaaf.

Haala Waliigalaa

Wantoota yeroo tooltip plugin fayyadamtan beekuu qabdan:

  • Tooltips ejjennoodhaaf mana kitaabaa qaama 3ffaa Popper irratti hirkatu. Gorsi meeshaa akka hojjetuuf bootstrap.js dura popper.min.js dabaluu qabda ykn bootstrap.bundle.min.js/ bootstrap.bundle.jskan Popper of keessaa qabu fayyadamuu qabda!
  • Gorsi meeshaalee sababa raawwii hojiitiin filachuudha, kanaaf ofii keetii jalqabuu qabda .
  • Gorsi meeshaa mata dureewwan dheerina zeeroo qaban gonkumaa hin agarsiifaman.
  • container: 'body'Qaamolee walxaxaa ta'an keessatti (akka gareewwan galtee keenyaa, gareewwan qaree fi kkf) keessatti rakkoolee agarsiisuu akka hin uumamneef ifteessi .
  • Qaamolee dhokatan irratti gorsa meeshaa kakaasuun hin hojjetu.
  • Gorsi meeshaa .disabledykn disabledelementoota elementii marfataa irratti kakaafamuu qabu.
  • Yeroo haayperliinkii sararoota hedduu dabarsan irraa kakaafamu, gorsi meeshaa giddugaleessa ta'a. Amala kana irraa of eeguuf s white-space: nowrap;kee irratti fayyadami .<a>
  • Gorsi meeshaa osoo elementoonni isaanii walgitan DOM irraa hin haqamin dura dhokachuu qabu.
  • Gorsi meeshaa galata elementii DOM golboo keessa jiruun kakaafamuu danda'a.
Akka durtiitti, qaamni kun qulqulleessituu qabiyyee ijaarame fayyadama, kunis qaamolee HTML kamiyyuu kan ifatti hin hayyamamne ofirraa baasa. Bal'ina isaaf kutaa saanitaayizarii galmee JaavaScript keenya keessatti ilaali.
Bu'aan sochii qaama kanaa prefers-reduced-motiongaaffii miidiyaa irratti hundaa'a. Kutaa sochii hir'ate sanada dhaqqabummaa keenyaa ilaali .

Sana hunda argatte? Guddaa dha, fakkeenya tokko tokkoon akkamitti akka hojjetan haa ilaallu.

Fakkeenya: Gorsa meeshaalee bakka hundatti dandeessisi

data-bs-toggleKaraan tokko gorsa meeshaalee hunda fuula tokko irratti jalqabsiisuu amaloota isaaniitiin filachuu ta'a :

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

Fakkeenyaaf

Gorsa meeshaalee ilaaluuf hidhannoowwan armaan gadii irratti harka kaa'i:

Barruu iddooqa hidhamtoota sarara keessaa tokko tokko gorsa meeshaa waliin agarsiisuuf. Kun amma filler qofa, nama ajjeesu hin qabu. Qabiyyeen as kaa'ame argama barreeffama dhugaa fakkeessuuf qofa . Kana hunda immoo gorsi meeshaalee yeroo haalawwan addunyaa dhugaa keessatti fayyadaman akkamitti akka fakkaatu yaada siif kennuu qofaaf. Kanaafuu amma gorsi meeshaalee hidhaa irratti argaman kun qabatamaan akkamitti akka hojjechuu danda'an argitan abdii qabna , erga marsariitii ykn pirojektii mataa keessanii irratti fayyadamtanii booda .

Kallattiiwwan gorsa meeshaa afran: gubbaa, mirgaa, jalaa fi bitaa ilaaluuf qareewwan armaan gadii irratti harka kaa'i. Kallattiiwwan yeroo Bootstrap RTL keessatti fayyadamtu calaqqisiifama.

<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>

Akkasumas HTML amala dabalamee wajjin:

<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>

SVG tokko waliin:

Sass jedhama

Jijjiiramoota

$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;

Fayyadama

Ijaarsi gorsa meeshaa qabiyyee fi mallattoo gaaffii irratti maddisiisa, akkasumas durtii gorsa meeshaa qaama kaka'umsaa isaanii booda kaa'a.

Gorsa meeshaa karaa JaavaScript kakaasi:

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

Bakki meeshaa yeroo qabduu warraa keenya qabu overflow: autoykn overflow: scrolljaallatu ofumaan jijjiiruuf yaala .table-responsive, garuu ammas iddoo iddoo iddoo jalqabaa eega. Kana furuuf, boundaryfilannoo (fooyyessaa garagalchuu popperConfigfilannoo fayyadamuun) gara HTMLElement kamiyyuu gatii durtii irra darbuuf saagi, 'clippingParents', kan akka document.body:

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

Markup gochuu

Mallattoon barbaachisu gorsa meeshaa dataamaloota qofa yoo titleta'u qaama HTML irratti gorsa meeshaa qabaachuu barbaadda. Mallattoon gorsa meeshaa uumame baay'ee salphaadha, haa ta'u malee bakka barbaada (durtiidhaan, ifteessaadhaan saagi top).

Gorsi meeshaalee fayyadamtoota kiiboordii fi teeknooloojii gargaaraaf akka hojjetu gochuu

Qaamolee HTML kanneen akka aadaa furtuu irratti xiyyeeffachuu danda'anii fi wal-qunnamsiisoo ta'an qofa irratti gorsa meeshaa dabaluu qabda (kan akka hidhannoo ykn too'annoo unkaa). Qaamolee HTML fedhii isaaniitiin (kan akka <span>s) amallicha dabaluudhaan xiyyeeffannoo akka qabaatan gochuun kan danda'amu ta'us tabindex="0", kun fayyadamtoota kiiboordiidhaaf qaamolee wal-qunnamtii hin taane irratti dhaabbii caancalaa nama aarsu fi burjaajessu danda'u ni dabala, fi teeknooloojiiwwan gargaaraa baay'een yeroo ammaa haala kana keessatti gorsa meeshaa hin beeksisan. Dabalataanis, akka kaka'umsa gorsa meeshaa keetii qofatti hin hirkatin hover, kunis gorsa meeshaa kee fayyadamtoota kiiboordiidhaaf kakaasuun akka hin danda'amne taasisa.

<!-- 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>

Qaamolee hanqifaman

Qaamonni disabledamaloota qaban wal-qunnamsiisoo miti, jechuun fayyadamtoonni xiyyeeffannoo, hover, ykn cuqaasuun gorsa meeshaa (ykn popover) kakaasuu hin danda'an. Akka furmaataatti, gorsa meeshaa marfata irraa kakaasuu barbaadda , <div>akka <span>gaariitti fayyadamuun kiiboordii irratti xiyyeeffachuu tabindex="0"danda'a.

<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>

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-bs-, akkuma keessatti dabali data-bs-animation="". Yeroo filannoowwan karaa amaloota deetaa dabarsitu akaakuu keesii maqaa filannoo camelCase irraa gara kebab-case jijjiiruu mirkaneessi. Fakkeenyaaf, fayyadamuu mannaa data-bs-customClass="beautifier", fayyadami data-bs-custom-class="beautifier".

Hubadhu sababa nageenyaaf filannoowwan sanitize, sanitizeFn, fi allowListamaloota deetaa fayyadamuun dhiyeessuu hin danda'an.
Maqaa Akaakuu Durtii dha Ibsa
animation boolee true Ce'umsa fade CSS gara gorsa meeshaatti hojii irra oolchi
container tarree | elementii | soba false

Gorsa meeshaa gara qaama murtaa'etti dabalata. Fakkeenyaaf: container: 'body'. Filannoon kun keessumaa faayidaa kan qabu yoo ta'u, kunis fiixee meeshaa dhangala'aa galmee keessatti naannoo qaama kakaasutti akka kaa'attu si dandeessisa - kunis yeroo guddina foddaa gorsa meeshaa qaama kakaasu irraa akka hin yaabbanne dhorka.

delay lakkoofsa | meeshaa 0

Gorsa meeshaa agarsiisuu fi dhoksuu harkifachuu (ms) - gosa kaka'umsa harkaa irratti hin hojjetu

Yoo lakkoofsi kenname, harkifannaa dhoksuu/agarsiisi lamaan irratti hojii irra oola

Caasaan wantaa: 1.1.delay: { "show": 500, "hide": 100 }

html boolee false

HTML gorsa meeshaa keessatti hayyami.

Yoo dhugaa ta'e, mallattoolee HTML kanneen tooltip's titlekeessa jiran tooltip keessatti ni agarsiifamu. Yoo soba ta'e, innerTextqabeentiin qabiyyee gara DOMtti galchuuf ni fayyadama.

Yoo waa'ee haleellaa XSS si yaaddesse barreeffama fayyadami.

placement tarree | faayidaa 'top'

Akkaataa tooltip itti dhaabdan - auto | gubbaa | jalaa | bitaa | sirrii.
Yeroo autoifteessamu, gorsa meeshaa daayinamiikiin irra deebi'ee qajeelcha.

Faankishiniin tokko iddoo murteessuuf yeroo fayyadamu, akka murfii isaa isa jalqabaatti noodiin DOM fiixee meeshaa fi noodiin DOM elementii kakaasu akka isa lammaffaatti waamama. Qabduun thisgara fakkeenya gorsa meeshaatti qindaa'a.

selector tarree | soba false Yoo filataan kenname, wantoonni gorsa meeshaa galmoota ifteessamaniif ni kennamu. Qabatamaan, kun akkasumas gorsa meeshaalee elementoota DOM daayinamiikiin dabalaman irratti hojii irra oolchuuf fayyadama ( jQuery.ondeeggarsa). Kanaa fi fakkeenya odeeffannoo qabu ilaalaa .
template hidhaa '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML yeroo gorsa meeshaa uumtu fayyadamuuf bu'uura.

Tooltip's titlegara .tooltip-inner.

.tooltip-arrowxiyya tooltip ta'a.

Qaamni marfataa alaa .tooltipgitaa fi role="tooltip".

title tarree | elementii | faayidaa ''

Gatii mata duree durtii yoo titleamalli hin jirre.

Yoo faankishiniin kenname, thistuuta wabii isaa elementii fiixeen meeshaa itti maxxane waliin ni waamama.

trigger hidhaa 'hover focus'

Akkaataa tooltip itti kakaafamu - | cuqaasi hover | xiyyeeffannoo | kan harkaanii. Kaka’umsa hedduu darbuu dandeessa; bakka adda baasuun addaan baasuu.

'manual'tooltip sagantaadhaan karaa .show(), .hide()fi .toggle()malawwanii akka kakaafamu agarsiisa; gatii kun kaka'umsa biraa kamiyyuu waliin walitti makamuu hin danda'u.

'hover'ofii isaatiin gorsa meeshaalee karaa kiiboordii kakaafamuu hin dandeenye ni fida, akkasumas kan fayyadamuu qabu yoo malawwan filannoo fayyadamtoota kiiboordii odeeffannoo walfakkaataa dabarsuu jiraatan qofa.

fallbackPlacements tarree ['top', 'right', 'bottom', 'left'] Tarree iddoowwan tarree keessatti (tartiiba filannootiin) kennuudhaan iddoowwan duubatti deebi'uu ibsi. Odeeffannoo dabalataaf docs amala Popper ilaali
boundary tarree | qabiyyee 'clippingParents' Daangaa danqaa dhangala'aa gorsa meeshaa (fooyyessaa preventOverflow Popper qofa irratti hojjeta). Akka durtiitti 'clippingParents'wabii HTMLElement (karaa JavaScript qofa) fudhachuu fi fudhachuu danda'a. Odeeffannoo dabalataaf Popper's detectOverflow docs ilaali .
customClass tarree | faayidaa ''

Yeroo agarsiifamu gitawwan gara gorsa meeshaatti dabali. Hubadhu, gitawwan kun gitawwan kamiyyuu unkaa keessatti ifteessaman irratti dabalataan akka dabalaman. Gitoota hedduu dabaluudhaaf, iddoowwan addaan baafadhu: 'class-1 class-2'.

Akkasumas faankishinii tarree tokko maqaa gita dabalataa of keessaa qabu deebisuu qabu dabarsuu dandeessa.

sanitize boolee true Sanitization dandeessisi ykn hanqisi. Yoo activated 'template'fi 'title'filannoowwan sanitized ta'u. Kutaa saanitaayizarii galmee JaavaScript keenya keessatti ilaali .
allowList meeshaa Gatii durtii Wanti amaloota fi mallattoolee hayyamaman of keessaa qabu
sanitizeFn null | faayidaa null Asirratti sanitize function mataa keessanii dhiyeessuu dandeessu. Kun faayidaa qabaachuu danda’a yoo mana kitaabaa addaa fayyadamuun qulqulleessuu raawwachuu barbaadde.
offset array | tarree | faayidaa [0, 0]

Ofseeti gorsa meeshaa galma isaa wajjin walqabatee. Amaloota deetaa keessatti tarree gatiiwwan komaandiin addaan baafaman akka:data-bs-offset="10,20"

Faankishiniin tokko ofseeti murteessuuf yeroo fayyadamu, wanta iddoo popper, wabii, fi popper rects akka falmii isaa isa jalqabaatti of keessaa qabuun waama. Qaamni kakaasu DOM noodiin akka falmii lammaffaatti darba. Faankishinichi tarree lakkoofsota lama qabu deebisuu qaba: .[skidding, distance]

Odeeffannoo dabalataaf Popper's offset docs ilaali .

popperConfig null | wanta | faayidaa null

Qindaa'ina Popper durtii Bootstrap jijjiiruuf, qindeessaa Popper ilaali .

Yeroo faankishiniin qindeessaa Popper uumuuf fayyadamu, wanta qindeessaa Popper durtii Bootstrap of keessaa qabuun waamama. Durtii qindeessaa mataa keetiin fayyadamuu fi walitti makuuf si gargaara. Faankishinichi wanta qindeessaa Popperiif deebisuu qaba.

Amaloota deetaa gorsa meeshaalee dhuunfaaf

Filannoon gorsa meeshaalee dhuunfaa filannoodhaan karaa fayyadama amaloota deetaa ifteessuun ni danda'ama, akkuma armaan olitti ibsame.

Faankishinii waliin fayyadamuupopperConfig

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

Malawwan

Malawwanii fi ce’umsawwan wal hin simne

Malleen API hundi wal hin simnee fi ce'umsa jalqabu . Akkuma ce'umsi jalqabame garuu osoo hin xumuramin gara nama bilbileetti deebi'u . Dabalataan, waamichi malaa qaama ce'umsaa irratti ni tuffatama .

Odeeffannoo dabalataaf galmee JaavaScript keenya ilaali .

agarsiisuu

Gorsa meeshaa elementii tokkoo mul'isa. Osoo gorsi meeshaa qabatamaan hin agarsiifamiin dura gara waamichaatti deebi'a (jechuunis osoo shown.bs.tooltiptaatee hin uumamin dura). Kunis akka “harkaan” kakaasuu tooltip ta’ee fudhatama. Gorsi meeshaa mata dureewwan dheerina zeeroo qaban gonkumaa hin agarsiifaman.

tooltip.show()

dhoksuu

Gorsa meeshaa elementii dhoksa. Osoo gorsi meeshaa qabatamaan hin dhokatiin (jechuun osoo taatee hin uumamin dura) gara waamichaatti deebi'a . hidden.bs.tooltipKunis akka “harkaan” kakaasuu tooltip ta’ee fudhatama.

tooltip.hide()

toggle jechuun ni danda'ama

Gorsa meeshaa qaama tokkoo jijjiira. Gara waamichaatti deebi'a osoo gorsi meeshaa qabatamaan hin agarsiifamin ykn hin dhokatiin (jechuunis osoo taatee shown.bs.tooltipykn hin uumamin dura hidden.bs.tooltip). Kunis akka “harkaan” kakaasuu tooltip ta’ee fudhatama.

tooltip.toggle()

gatuu

Gorsa meeshaa qaama tokkoo dhoksuu fi balleessa (Deetaa qaama DOM irratti kuufame haqa). Gorsi meeshaalee bakka bu'iinsa fayyadaman ( kanneen selectorfilannoo fayyadamuun uumaman ) qaamolee kaka'umsaa sanyii irratti dhuunfaan balleessuu hin danda'an.

tooltip.dispose()

dandeessisuu

Dandeettii agarsiisuuf tooltip elementii kenna. Gorsi meeshaalee durtiidhan dandeessifama.

tooltip.enable()

akka hin hojjenne gochuu

Dandeettii gorsa meeshaa elementii agarsiisuuf haqa. Gorsi meeshaa agarsiisuu kan danda'u yoo irra deebi'amee dandeessifame qofa.

tooltip.disable()

toggleDandeessifame

Dandeettii gorsa meeshaa qaama tokkoo akka agarsiifamu ykn dhokfamuuf jijjiira.

tooltip.toggleEnabled()

odeeffannoo dhiyeenyaa

Bakka gorsa meeshaa qaama tokkoo fooyyessa.

tooltip.update()

Fakkeenya argadhu

Mala istaatiksii kan fakkeenya gorsa meeshaa qaama DOM waliin walqabate argachuuf si dandeessisu

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

Fakkeenya argadhuYknUumi

Mala istaatiksii kan fakkeenya gorsa meeshaa qaama DOM waliin walqabate argachuuf si dandeessisu, ykn yoo hin jalqabne haaraa uumuuf si dandeessisu

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

Taateewwan

Gosa taatee Ibsa
show.bs.tooltip Taatee kun yeroo showmala fakkeenyaa waamamu battalumatti dhukaasa.
shown.bs.tooltip Taatee kun yeroo gorsi meeshaa fayyadamaaf mul'atu taasifamu ni ari'ama (ce'umsa CSS xumuramu ni eega).
hide.bs.tooltip Taatee kun yeroo hidemala fakkeenyaa waamame battalumatti dhukaafama.
hidden.bs.tooltip Taatee kun yeroo gorsi meeshaa fayyadamaa irraa dhokfamuu xumuru ni ari'ama (ce'umsa CSS xumuramuu eega).
inserted.bs.tooltip Taatee kun taatee booda show.bs.tooltipyeroo unkaan gorsa meeshaa DOM irratti dabalame ari'ama.
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()