Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
in English

Popovers jedhaman

Dokumantarii fi fakkeenyota Bootstrap popovers, akkuma kanneen iOS keessatti argaman, elementii kamiyyuu marsariitii keessan irratti dabaluudhaaf.

Haala Waliigalaa

Wantoota yeroo popover plugin fayyadamtan beekuu qabdan:

  • Popovers ejjennoodhaaf mana kitaabaa qaama 3ffaa Popper irratti hirkatu. Poppers akka hojjetuuf bootstrap.js dura popper.min.js dabaluu qabda ykn bootstrap.bundle.min.js/ bootstrap.bundle.jskan Popper of keessaa qabu fayyadamuu qabda!
  • Popovers akka hirkattummaatti tooltip plugin barbaadu.
  • Popovers sababa raawwii hojiitiin opt-in waan ta'aniif ofii keetii jalqabuu qabda .
  • Zeeroo-dheerina titlefi contentgatiiwwan gonkumaa popover hin agarsiisan.
  • container: 'body'Qaamolee walxaxaa ta'an keessatti (akka gareewwan galtee keenyaa, gareewwan qaree fi kkf) keessatti rakkoolee agarsiisuu akka hin uumamneef ifteessi .
  • Elementiiwwan dhokatan irratti popovers kakaasuun hin hojjetu.
  • Popovers for .disabledykn disabledelementoota elementii marfataa irratti kakaafamuu qabu.
  • Yeroo anchors sarara hedduu qaxxaamuran irraa kakaafamu, popovers bal'ina waliigalaa anchors' gidduutti giddugaleessa ta'a. Amala kana irraa of eeguuf s .text-nowrapkee irratti fayyadami .<a>
  • Popovers osoo elementoonni isaanii walgitan DOM keessaa hin baafamin dura dhokfamuu qabu.
  • Popovers galata elementii shadow DOM keessa jiruun kakaafamuu danda'a.
Akka durtiitti, qaamni kun qulqulleessituu qabiyyee ijaarame fayyadama, kunis qaamolee HTML kamiyyuu kan ifatti hin hayyamamne balleessu. 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 .

Fakkeenyota tokko tokkoon popovers akkamitti akka hojjetan ilaaluuf dubbisuu itti fufi.

Fakkeenya: Popovers bakka hundatti dandeessisi

data-bs-toggleKaraan tokko fuula tokko irratti popovers hunda jalqabsiisuu danda'an amaloota isaaniitiin filachuu ta'a :

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Fakkeenya: containerFilannoo fayyadamuu

containerYeroo akkaataawwan tokko tokko qaama warraa irratti kanneen popover gidduu seenan qabdu, akka HTML popover'n bakka isaa qaama sana keessaa mul'atutti amala ifteessuu barbaadda .

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Fakkeenya

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Kallattii afur

Filannoon afur ni jiru: gubbaa, mirgaa, jalaa, fi bitaa qindaa'e. Kallattiiwwan yeroo Bootstrap RTL keessatti fayyadamtu calaqqisiifama.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

Cuqaasuu itti aanu irratti hojii irraa ari'i

Cuqaasuu itti aanu fayyadamaa focusqaama adda ta'e qaama jijjiirraa irraa popovers kuffisuuf kaka'umsa fayyadami.

Mallattoo addaa cuqaasuu itti aanu irratti ari'uuf barbaachisa

Amala qaxxaamuraa-browser fi qaxxaamuraa-waltajjii sirrii ta'eef, mallattoo fayyadamuu qabda malee mallattoo fayyadamuu qabda , akkasumas<a> amaloota hammachuu qabda .<button>tabindex

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

Qaamolee hanqifaman

Qaamonni disabledamaloota qaban wal-qunnamsiisoo miti, jechuun fayyadamtoonni popover (ykn tooltip) kakaasuuf hover ykn cuqaasuu hin danda'an. Akka furmaataatti, popover marfata irraa kakaasuu barbaadda <div>, <span>ideally made keyboard-focusable using tabindex="0".

Kakaasitoota popover hanqifamaniif, akkasumas data-bs-trigger="hover focus"akka popover fayyadamtoota keetiif yaada mul'ataa battalumatti mul'atu filachuu dandeessa sababiin isaas isaan qaama hanqifame irratti cuqaasuu hin eegne.

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Sass jedhama

Jijjiiramoota

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Fayyadama

Popovers karaa JavaScript dandeessisi:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Popovers fayyadamtoota kiiboordii fi teeknooloojii gargaaraaf akka hojjetu gochuu

Fayyadamtoonni kiiboordii popovers kee akka kakaasan hayyamuuf, elementoota HTML kanneen akka aadaa kiiboordii irratti xiyyeeffachuu danda'anii fi wal-qunnamsiisoo ta'an qofatti dabaluu qabda (kan akka hidhannoo ykn too'annoo unkaa). Qaamolee HTML fedhii malee (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 qabiyyee popover hin beeksisan . hoverDabalataanis, akka kaka'umsa popovers keessaniif qofa irratti hin hirkatinaa , kunis fayyadamtoota kiiboordiidhaaf kakaasuun akka hin danda'amne waan taasisuuf.

Filannoo waliin popovers keessatti HTML badhaadhaa, caaseffama qabu galchuu kan dandeessu yoo ta'ellee, htmlqabiyyee garmalee dabaluu irraa akka of qusattan cimsinee isin gorsina. Akkaataan popovers yeroo ammaa hojjetan, erga agarsiifamee booda, qabiyyeen isaanii elementii kaka'umsaa aria-describedbyamaloota waliin hidhamee jira. Kanarraa kan ka'e, guutummaan qabiyyee popover fayyadamtoota teeknooloojii gargaarsaaf akka yaa'a dheeraa, addaan hin cinne tokkootti ni ifooma.

Dabalataan, too'annoo wal-qunnamtii (kan akka qaamolee unkaa ykn hidhannoo) popover kee keessatti hammachuun kan danda'amu yoo ta'ellee (qaamolee kana gara allowListamaloota fi mallattoolee hayyamamaniitti dabaluudhaan), yeroo ammaa popover tartiiba xiyyeeffannoo kiiboordii akka hin bulchine beekaa. Yeroo fayyadamaan kiiboordii popover banu, xiyyeeffannaan elementii kakaasu irratti hafa, akkasumas popover yeroo baay'ee caasaa galmee keessatti battalumatti kakaasuu waan hin hordofneef, gara fuulduraatti/dhiibuun wabii hin jiruTABfayyadamaa kiiboordii gara popover ofii isaatii ni sochoosa. Gabaabumatti, salphaatti to'annoo wal-qunnamtii popover tokkotti dabaluun too'annoowwan kana fayyadamtoota kiiboordii fi fayyadamtoota teeknooloojiiwwan gargaarsaatiif akka hin dhaqqabne/hin fayyadamne gochuu hin oolu, ykn yoo xiqqaate tartiiba xiyyeeffannoo waliigalaa loojikii hin qabne taasisuu hin oolu. Haalota kanneen keessatti, bakka isaa qaaqa moodaalii fayyadamuu yaadaa.

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 CSS fade gara popover tti hojiirra oolchi
container tarree | elementii | soba false

Poopover elementii murtaa'e tokkotti dabalata. Fakkeenyaaf: container: 'body'. Filannoon kun keessumaa faayidaa guddaa kan qabu yoo ta'u, kunis popover dhangala'aa galmee keessatti naannoo elementii kakaasutti akka kaa'attu si dandeessisa - kunis yeroo guddina foddaa jijjiirraa popover elementii kakaasu irraa akka hin yaabbanne dhorka.

content tarree | elementii | faayidaa ''

Gatii qabiyyee durtii yoo data-bs-contentamalli hin jirre.

Yoo faankishiniin kenname, thiswabii isaa elementii popover itti maxxane waliin qindaa'a.

delay lakkoofsa | meeshaa 0

Harkifannaa agarsiisuu fi dhoksuu popover (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 popover keessa galchi. Yoo soba ta'e, innerTextqabeentiin qabiyyee gara DOMtti galchuuf ni fayyadama. Yoo waa'ee haleellaa XSS si yaaddesse barreeffama fayyadami.
placement tarree | faayidaa 'right'

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

Faankishiniin tokko iddoo murteessuuf yeroo fayyadamu, noodiin popover DOM akka falmii isaa isa jalqabaatti fi elementii kakaasu DOM noodiin akka lammaffaatti waamama. Yaadni thisgara fakkeenya popover tti qindaa'a.

selector tarree | soba false Yoo filataan kenname, wantoonni popover galmoota ifteessamaniif ni kennamu. Qabatamaan, kun qabiyyee HTML daayinamikii popovers akka dabalaman dandeessisuuf fayyadama. Kanaa fi fakkeenya odeeffannoo qabu ilaalaa .
template hidhaa '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML yeroo popover uumtu fayyadamuuf bu'uura.

Popover's titlegara .popover-header.

Popover's contentgara .popover-body.

.popover-arrowxiyya popover ta'a.

Qaamni marfataa alaa .popovergita qabaachuu qaba.

title tarree | elementii | faayidaa ''

Gatii mata duree durtii yoo titleamalli hin jirre.

Yoo faankishiniin kenname, thiswabii isaa elementii popover itti maxxane waliin qindaa'a.

trigger hidhaa 'click' Akkaataa popover itti kaka'u - | cuqaasaa hover | xiyyeeffannoo | kan harkaanii. Kaka’umsa hedduu darbuu dandeessa; bakka adda baasuun addaan baasuu. manualtrigger biraa kamiinuu waliin walitti makamuu hin danda’u.
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 popover (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 popover irratti kutaalee 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. If activated 'template', 'content'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, 8]

Ofseeti popover kan galma isaa wajjin wal bira qabamee yoo ilaalamu. 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 popovers dhuunfaa

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

Faankishinii waliin fayyadamuupopperConfig

var popover = new bootstrap.Popover(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

Poopover elementii tokkoo mul'isa. Poopover qabatamaan osoo hin agarsiifamiin dura (jechuunis shown.bs.popovertaatee osoo hin uumamin dura) gara waamichaatti deebi'a. Kun akka “harkaan” popover kakaasutti ilaalama. Popovers mata duree fi qabiyyeen isaanii lamaan isaanii dheerina zeeroo ta'an gonkumaa hin agarsiifaman.

myPopover.show()

dhoksuu

Poopover elementii tokkoo dhoksa. Osoo popover qabatamaan hin dhokatin (jechuun osoo hidden.bs.popovertaatee hin uumamin dura) gara waamichaatti deebi'a. Kun akka “harkaan” popover kakaasutti ilaalama.

myPopover.hide()

toggle jechuudha

Poopover elementii tokkoo jijjiira. Osoo popover qabatamaan hin agarsiifamin ykn hin dhokatiin dura gara waamichaatti deebi'a (jechuunis osoo taatee shown.bs.popoverykn hin uumamin dura hidden.bs.popover). Kun akka “harkaan” popover kakaasutti ilaalama.

myPopover.toggle()

gatuu

Poopover elementii dhoksaa fi balleessa (Deetaa elementii DOM irratti kuufame ni haqa). Popovers kanneen delegation fayyadaman ( kanneen selectorfilannoo fayyadamuun uumaman ) elementoota kaka'umsa sanyii irratti dhuunfaan balleessuu hin danda'an.

myPopover.dispose()

dandeessisuu

Poopover elementii tokkoo dandeettii agarsiifamuu kenna. Popovers durtiidhan dandeessifama.

myPopover.enable()

akka hin hojjenne gochuu

Dandeettii popover elementii tokkoo agarsiisuuf qabu ni haqa. Popover agarsiisuu kan danda'u yoo irra deebi'amee dandeessifame qofa.

myPopover.disable()

toggleDandeessifame

Dandeettii popover elementii akka agarsiifamu ykn dhokfamuuf jijjiira.

myPopover.toggleEnabled()

odeeffannoo dhiyeenyaa

Ejjennoo popover elementii tokkoo fooyyessa.

myPopover.update()

Fakkeenya argadhu

Mala istaatiksii kan fakkeenya popover elementii DOM waliin walqabate argachuuf si dandeessisu

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

Fakkeenya argadhuYknUumi

Mala static kan fakkeenya popover elementii DOM waliin walqabate argachuuf si dandeessisu, ykn yoo hin jalqabne haaraa uumuuf si dandeessisu

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

Taateewwan

Gosa taatee Ibsa
agarsiisi.bs.hiyyummaa Taatee kun yeroo showmala fakkeenyaa waamamu battalumatti dhukaasa.
agarsiise.bs.hiyyummaa Taatee kun yeroo popover fayyadamaaf mul'atu taasifamu ni ari'ama (ce'umsa CSS xumuramu ni eega).
dhoksi.bs.hiyyummaa Taatee kun yeroo hidemala fakkeenyaa waamame battalumatti dhukaafama.
dhokataa.bs.hiyyummaa Taatee kun yeroo popover fayyadamaa irraa dhokatee xumure ni ari'ama (ce'umsa CSS xumuramu ni eega).
galfame.bs.hiyyummaa Taatee kun taatee booda show.bs.popoveryeroo unkaan popover DOM irratti dabalame ari'ama.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})