Source

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.js irratti hirkatu . Popper.min.js bootstrap.js dura dabaluu qabda ykn bootstrap.bundle.min.js/ bootstrap.bundle.jskan Popper.js of keessaa qabu fayyadamuu qabda popovers akka hojjetaniif!
  • Popovers akka hirkattummaatti tooltip plugin barbaadu.
  • Yoo JavaScriptutil.js keenya madda irraa ijaaraa jirta ta'e, .
  • 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.

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-toggleKaraan tokko fuula tokko irratti popovers hunda jalqabsiisuu danda'an amaloota isaaniitiin filachuu ta'a :

$(function () {
  $('[data-toggle="popover"]').popover()
})

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 .

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Fakkeenya

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-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.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  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> amalli hammachuu qabda .<button>tabindex

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
  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>ykn <span>fi pointer-eventson the on the disabled element irra darbuu barbaadda.

Kakaasitoota popover hanqifamaniif, akkasumas data-trigger="hover"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" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Fayyadama

Popovers karaa JavaScript dandeessisi:

$('#example').popover(options)

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-animation="".

Maqaa Akaakuu Durtii dha Ibsa
sochii qaamaa (animation). boolee dhugaa Ce'umsa CSS fade gara popover tti hojiirra oolchi
qabduu tarree | elementii | soba soba

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 popover elementii kakaasu irraa akka hin yaabbanne dhorka.

qabiyyee tarree | elementii | faayidaa '' .

Gatii qabiyyee durtii yoo data-contentamalli hin jirre.

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

boodatti hafuu 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 soba HTML popover keessa galchi. Yoo soba ta'e, textmala jQuery qabiyyee gara DOMtti galchuuf fayyadama. Yoo waa'ee haleellaa XSS si yaaddesse barreeffama fayyadami.
ramaddii tarree | faayidaa 'sirrii'

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.

filannoodha tarree | soba soba 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 .
unkaa hidhaa '<div class="popover" role="tooltip"><div class="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.

.arrowxiyya popover ta'a.

Qaamni marfataa alaa .popovergita qabaachuu qaba.

mata-duree tarree | elementii | faayidaa '' .

Gatii mata duree durtii yoo titleamalli hin jirre.

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

dammaqsuu hidhaa 'cuqaasaa'. 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.
ofseeti jechuun ni danda’ama lakkoofsa | hidhaa 0. Ofseeti popover kan galma isaa wajjin wal bira qabamee yoo ilaalamu. Odeeffannoo dabalataaf Popper.js's offset docs ilaali .
fallbackIddoo kaa'uu tarree | tarree 'garagalchuu' Popper fallback irratti ejjennoo kam akka fayyadamu ibsuuf hayyami. Odeeffannoo dabalataaf Docs amala Popper.js ilaali
daangaa tarree | qabiyyee 'Warra garagalchuu'. Daangaa danqaa dhangala'aa popover. Gatii 'viewport', 'window', 'scrollParent', ykn wabii HTMLElement fudhata (JavaScript qofa). Odeeffannoo dabalataaf Popper.js's preventOverflow docs ilaali .

Amaloota deetaa popovers dhuunfaa

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

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 .

$().popover(options)

Kuusaa elementii tokkoof popovers jalqaba.

.popover('show')

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'e gonkumaa hin agarsiifaman.

$('#element').popover('show')

.popover('hide')

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.

$('#element').popover('hide')

.popover('toggle')

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.

$('#element').popover('toggle')

.popover('dispose')

Popover elementii tokkoo dhoksee balleessa. Popovers kanneen delegation fayyadaman ( kanneen selectorfilannoo fayyadamuun uumaman ) elementoota kaka'umsa sanyii irratti dhuunfaan balleessuu hin danda'an.

$('#element').popover('dispose')

.popover('enable')

Poopover elementii tokkoo dandeettii agarsiifamuu kenna. Popovers durtiidhan dandeessifama.

$('#element').popover('enable')

.popover('disable')

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

$('#element').popover('disable')

.popover('toggleEnabled')

Dandeettii popover elementii akka agarsiifamu ykn dhokfamuuf jijjiira.

$('#element').popover('toggleEnabled')

.popover('update')

Ejjennoo popover elementii tokkoo fooyyessa.

$('#element').popover('update')

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.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})