Popovers
Doiciméadú agus samplaí chun popovers Bootstrap, cosúil leis na cinn a fhaightear in iOS, a chur le haon eilimint ar do shuíomh.
Forbhreathnú
Rudaí le fios agus an breiseán popover in úsáid:
- Bíonn Popovers ag brath ar an leabharlann tríú páirtí Popper le haghaidh suímh. Ní mór duit popper.min.js a chur isteach roimh
bootstrap.js
, nó úsáid a bhaint as ceannbootstrap.bundle.min.js
ina bhfuil Popper. - Éilíonn Popovers an breiseán popover mar spleáchas.
- Tá Popovers rogha an diúltaithe ar chúiseanna feidhmíochta, mar sin ní mór duit a thúsú iad féin .
- Ní thaispeánfaidh fad náid
title
nácontent
luachanna aon aníos choíche. - Sonraigh
container: 'body'
chun fadhbanna rindreála a sheachaint i gcomhpháirteanna níos casta (amhail ár ngrúpaí ionchuir, grúpaí cnaipí, srl). - Ní oibreofar popovers ar eilimintí ceilte.
- Ní mór popovers
.disabled
nódisabled
eilimintí a spreagadh ar eilimint chumhdaigh. - Nuair a spreagtar iad ó ancairí a théann trasna línte iolracha, díreofar na popovers idir leithead iomlán na n-ancairí. Bain úsáid as
.text-nowrap
ar do<a>
chuid chun an iompar seo a sheachaint. - Ní mór popovers a chur i bhfolach sula mbaintear na heilimintí comhfhreagracha as an DOM.
- Is féidir popovers a spreagadh a bhuíochas le eilimint taobh istigh de scáth DOM.
prefers-reduced-motion
cheist na meán. Féach an
rannán tairiscint laghdaithe dár gcáipéisíocht inrochtaineachta .
Lean ort ag léamh chun a fheiceáil conas a oibríonn popovers le roinnt samplaí.
Samplaí
Cumasaigh popovers
Mar a luadh thuas, ní mór duit popovers a thúsú sular féidir iad a úsáid. Bealach amháin chun na míreanna popover ar leathanach a thúsú ná iad a roghnú de réir a n- data-bs-toggle
tréithe, mar a leanas:
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
Taispeántas beo
Bainimid úsáid as JavaScript cosúil leis an mblúire thuas chun an popover beo seo a leanas a sholáthar. Socraítear teidil via data-bs-title
agus socraítear ábhar coirp trí data-bs-content
.
title
nó
data-bs-title
i do HTML a úsáid. Nuair
title
a úsáidtear é, cuirfear Popper ina ionad go huathoibríoch
data-bs-title
nuair a dhéantar an eilimint a rindreáil.
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
Ceithre threoir
Tá ceithre rogha ar fáil: barr, ceart, bun agus clé. Léirítear treoracha nuair a bhíonn Bootstrap in úsáid in RTL. Socraigh data-bs-placement
chun an treo a athrú.
<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>
Saincheapthacontainer
Nuair a bhíonn roinnt stíleanna agat ar eilimint tuismitheora a chuireann isteach ar theacht aníos, beidh tú ag iarraidh saincheaptha a shonrú container
ionas go bhfeicfear HTML an popover laistigh den eilimint sin ina ionad sin. Tá sé seo coitianta i dtáblaí sofhreagracha, i ngrúpaí ionchuir, agus a leithéidí.
const popover = new bootstrap.Popover('.example-popover', {
container: 'body'
})
Staid eile ina mbeidh tú ag iarraidh saincheaptha sainráite a shocrú container
ná popovers taobh istigh den dialóg módúil , chun a chinntiú go bhfuil an popover féin i gceangal leis an modúl. Tá sé seo thar a bheith tábhachtach maidir le míreanna aníos a bhfuil gnéithe idirghníomhacha iontu – beidh dialóga módacha gafa ag díriú, mar sin mura rud é gur gné linbh den mhódúil é an popover, ní bheidh úsáideoirí in ann na heilimintí idirghníomhacha seo a dhíriú ná a ghníomhachtú.
const popover = new bootstrap.Popover('.example-popover', {
container: '.modal-body'
})
Popovers saincheaptha
Curtha leis in v5.2.0Is féidir leat cuma na popovers a shaincheapadh le hathróga CSS . Shocraigh muid rang saincheaptha data-bs-custom-class="custom-popover"
chun ár gcuma saincheaptha a raon feidhme agus úsáidimid é chun roinnt de na hathróga CSS áitiúla a shárú.
.custom-popover {
--bs-popover-max-width: 200px;
--bs-popover-border-color: var(--bs-primary);
--bs-popover-header-bg: var(--bs-primary);
--bs-popover-header-color: var(--bs-white);
--bs-popover-body-padding-x: 1rem;
--bs-popover-body-padding-y: .5rem;
}
<button type="button" class="btn btn-secondary"
data-bs-toggle="popover" data-bs-placement="right"
data-bs-custom-class="custom-popover"
data-bs-title="Custom popover"
data-bs-content="This popover is themed via CSS variables.">
Custom popover
</button>
Ruaig an chéad chliceáil eile
Úsáid an focus
truicear chun popovers a dhíbhe ar an gcéad chliceáil eile ar eilimint eile seachas an eilimint scoránaigh.
Marcáil shonrach ag teastáil le haghaidh díbhe-ar-chliceáil eile
Le haghaidh iompar ceart trasbhrabhsálaí agus tras-ardáin, ní mór duit an chlib a úsáid <a>
, ní an <button>
chlib, agus ní mór duit tabindex
tréith a chur san áireamh freisin.
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
const popover = new bootstrap.Popover('.popover-dismiss', {
trigger: 'focus'
})
Eilimintí faoi mhíchumas
Níl na heilimintí leis an disabled
tréith idirghníomhach, rud a chiallaíonn nach féidir le húsáideoirí a bheith ag foluain nó cliceáil orthu chun aníos (nó leid uirlisí) a spreagadh. Mar réiteach oibre, beidh tú ag iarraidh an popover a spreagadh ó fhillteán <div>
nó <span>
, go hidéalach atá dírithe ar mhéarchlár ag baint úsáide as tabindex="0"
.
Maidir le truicear aníos aníos faoi mhíchumas, b’fhéidir gurbh fhearr leat freisin data-bs-trigger="hover focus"
ionas go bhfeicfear an aníos mar aiseolas amhairc láithreach do d’úsáideoirí mar go mb’fhéidir nach mbeidís ag súil le cliceáil ar eilimint díchumasaithe.
<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>
CSS
Athróga
Curtha leis in v5.2.0Mar chuid de chur chuige athróg CSS Bootstrap atá ag teacht chun cinn, úsáideann popovers athróga áitiúla CSS anois le .popover
haghaidh saincheaptha feabhsaithe fíor-ama. Socraítear luachanna na n-athróg CSS trí Sass, mar sin tacaítear le saincheaptha Sass fós freisin.
--#{$prefix}popover-zindex: #{$zindex-popover};
--#{$prefix}popover-max-width: #{$popover-max-width};
@include rfs($popover-font-size, --#{$prefix}popover-font-size);
--#{$prefix}popover-bg: #{$popover-bg};
--#{$prefix}popover-border-width: #{$popover-border-width};
--#{$prefix}popover-border-color: #{$popover-border-color};
--#{$prefix}popover-border-radius: #{$popover-border-radius};
--#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
--#{$prefix}popover-box-shadow: #{$popover-box-shadow};
--#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
--#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
@include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
--#{$prefix}popover-header-color: #{$popover-header-color};
--#{$prefix}popover-header-bg: #{$popover-header-bg};
--#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
--#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
--#{$prefix}popover-body-color: #{$popover-body-color};
--#{$prefix}popover-arrow-width: #{$popover-arrow-width};
--#{$prefix}popover-arrow-height: #{$popover-arrow-height};
--#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
Athróga Sass
$popover-font-size: $font-size-sm;
$popover-bg: $white;
$popover-max-width: 276px;
$popover-border-width: $border-width;
$popover-border-color: var(--#{$prefix}border-color-translucent);
$popover-border-radius: $border-radius-lg;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow: $box-shadow;
$popover-header-font-size: $font-size-base;
$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;
Úsáid
Cumasaigh popovers trí JavaScript:
const exampleEl = document.getElementById('example')
const popover = new bootstrap.Popover(exampleEl, options)
Oibríonn popovers a dhéanamh d'úsáideoirí méarchláir agus teicneolaíochta cúnta
Chun gur féidir le húsáideoirí méarchláir do chuid popovers a ghníomhachtú, níor cheart duit ach iad a chur le heilimintí HTML atá go traidisiúnta dírithe ar mhéarchlár agus idirghníomhach (cosúil le naisc nó rialuithe foirmeacha). Cé gur féidir gnéithe treallach HTML (amhail <span>
s) a fhócasú tríd an tabindex="0"
tréith a chur leis, cuirfidh sé seo stadanna cluaisíní a d'fhéadfadh a bheith corraitheach agus mearbhallach ar eilimintí neamh-idirghníomhacha d'úsáideoirí méarchláir, agus ní fhógraíonn an chuid is mó de na teicneolaíochtaí cúnta faoi láthair ábhar an phreabfhuinneog sa chás seo . Ina theannta sin, ná bí ag brath go hiomlán hover
mar spreag do popovers, mar go mbeidh sé seo dodhéanta iad a spreagadh d'úsáideoirí méarchláir.
Cé gur féidir leat HTML saibhir, struchtúrtha a chur isteach i popovers leis an html
rogha, molaimid go láidir duit gan iomarca ábhar a chur leis. Is é an chaoi a n-oibríonn popovers faoi láthair ná go bhfuil a n-inneachar ceangailte leis an eilimint truicear leis an aria-describedby
tréith nuair a thaispeánfar é. Mar thoradh air sin, fógrófar ábhar iomlán an popover d'úsáideoirí teicneolaíochta cúnta mar aon sruth fada, gan bhriseadh.
Ina theannta sin, cé gur féidir rialuithe idirghníomhacha (cosúil le heilimintí foirme nó naisc) a chur san áireamh i do popover (trí na gnéithe seo a chur leis na allowList
tréithe agus na clibeanna ceadaithe), bí ar an eolas nach ndéanann an aníos aníos bainistiú ar ord fócas an mhéarchláir faoi láthair. Nuair a osclaíonn úsáideoir méarchláir preabfhuinneog, fanann an fócas ar an eilimint truicearaigh, agus toisc nach leanann an popover de ghnáth láithreach an truicear i struchtúr an doiciméid, níl aon ráthaíocht ann go mbeidh tú ag bogadh ar aghaidh/ag brúTABbogfaidh úsáideoir méarchláir isteach sa popover féin. I mbeagán focal, má chuirtear rialuithe idirghníomhacha le huasghrádú go simplí, is dócha go mbeidh na rialuithe seo dosroichte/do-úsáidte d'úsáideoirí méarchláir agus d'úsáideoirí teicneolaíochtaí cúnta, nó ar a laghad ord fócais fhoriomlán míloighciúil a dhéanamh. Sna cásanna seo, smaoinigh ar dialóg módúil a úsáid ina ionad sin.
Roghanna
Toisc gur féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript, is féidir leat ainm rogha a chur i gceangal le data-bs-
, mar atá i data-bs-animation="{value}"
. Bí cinnte cineál an cháis d’ainm na rogha a athrú ó “ camelCase ” go “ kebab-case ” agus tú ag dul thar na roghanna trí tréithe sonraí. Mar shampla, úsáid data-bs-custom-class="beautifier"
in ionad data-bs-customClass="beautifier"
.
Amhail Bootstrap 5.2.0, tacaíonn na comhpháirteanna go léir le tréith sonraí forchoimeádta turgnamhachadata-bs-config
ar féidir cumraíocht chomhpháirt shimplí a áireamh mar theaghrán JSON. data-bs-config='{"delay":0, "title":123}'
Nuair a bhíonn agus tréithe ag eilimint , is é an luach data-bs-title="456"
deiridh a bheidh ann agus sáróidh na tréithe sonraí ar leith na luachanna a thugtar ar . Ina theannta sin, tá tréithe sonraí atá ann cheana in ann luachanna JSON cosúil le .title
456
data-bs-config
data-bs-delay='{"show":0,"hide":150}'
sanitize
,
sanitizeFn
, agus
allowList
roghanna a sholáthar trí úsáid a bhaint as tréithe sonraí.
Ainm | Cineál | Réamhshocrú | Cur síos |
---|---|---|---|
allowList |
réad | Luach réamhshocraithe | Réad ina bhfuil tréithe agus clibeanna ceadaithe. |
animation |
Boole | true |
Cuir trasdul céimnithe CSS i bhfeidhm ar an bpíosa aníos. |
boundary |
téad, eilimint | 'clippingParents' |
Teorainn shrianta thar maoil an popover (ní bhaineann sé ach le modhnóir preventOverflow Popper). De réir réamhshocraithe, tá sé 'clippingParents' agus is féidir glacadh le tagairt HTMLElement (trí JavaScript amháin). Le haghaidh tuilleadh faisnéise déan tagairt do dhoiciméid detectOverflow Popper . |
container |
teaghrán, eilimint, bréagach | false |
Cuireann sé an popover le gné ar leith. Sampla: container: 'body' . Tá an rogha seo úsáideach go háirithe sa mhéid is go gceadaíonn sé duit an popover a shuíomh i sreabhadh an doiciméid in aice leis an eilimint truicearúcháin - rud a chuirfidh cosc ar an popover snámh ón eilimint spreagthaigh le linn méid na fuinneoige a athrú. |
content |
teaghrán, eilimint, feidhm | '' |
Luach réamhshocraithe an ábhair mura data-bs-content bhfuil an aitreabúid i láthair. Má thugtar feidhm, glaofar í lena this tacar tagartha don eilimint a bhfuil an popover ceangailte léi. |
customClass |
teaghrán, feidhm | '' |
Cuir ranganna leis an popover nuair a thaispeánfar é. Tabhair faoi deara go gcuirfear na ranganna seo i dteannta le ranganna ar bith a shonraítear sa teimpléad. Chun ranganna iolracha a chur leis, scar iad le spásanna: 'class-1 class-2' . Is féidir leat feidhm a rith freisin ar cheart di teaghrán amháin a thabhairt ar ais ina bhfuil ainmneacha ranga breise. |
delay |
uimhir, réad | 0 |
Moill ag taispeáint agus ag cur aníos aníos (ms) – ní bhaineann sé seo le cineál truicear láimhe. Má chuirtear uimhir ar fáil, cuirtear moill i bhfeidhm ar an dá cheilt/seó. Is é struchtúr an ábhair: delay: { "show": 500, "hide": 100 } . |
fallbackPlacements |
teaghrán, eagar | ['top', 'right', 'bottom', 'left'] |
Sainmhínigh socrúcháin chúltaca trí liosta socrúcháin a sholáthar in eagar (in ord tosaíochta). Le haghaidh tuilleadh eolais déan tagairt do dhoiciméid iompair Popper . |
html |
Boole | false |
Ceadaigh HTML sa popover. Más fíor, déanfar clibeanna HTML sna hearraí aníos title a rindreáil sa pháipéir aníos. Má tá sé bréagach, innerText bainfear úsáid as maoin chun ábhar a chur isteach sa DOM. Úsáid téacs má tá imní ort faoi ionsaithe XSS. |
offset |
uimhir, teaghrán, feidhm | [0, 0] |
Fritháireamh an popover i gcoibhneas lena sprioc. Is féidir leat teaghrán a chur i tréithe sonraí le luachanna scartha le camóg mar: data-bs-offset="10,20" . Nuair a úsáidtear feidhm chun an fhritháireamh a chinneadh, tugtar le réad ina bhfuil an socrúchán popper, an tagairt, agus rects popper mar a chéad argóint. Ritear an nód DOM na heiliminte spreagúla mar an dara argóint. Caithfidh an fheidhm eagar a thabhairt ar ais le dhá uimhir : sleamhnú , fad . Le haghaidh tuilleadh eolais déan tagairt do dhoiciméid fhritháireamh Popper . |
placement |
teaghrán, feidhm | 'top' |
Conas an popover a shuíomh: uathoibríoch, barr, bun, clé, ar dheis. Nuair auto a shonraítear é, athróidh sé an popover go dinimiciúil. Nuair a úsáidtear feidhm chun an socrúchán a chinneadh, tugtar an nód DOM popover mar a chéad argóint agus nód DOM na heiliminte spreagúla mar an dara háit. Tá an this comhthéacs socraithe don chás aníos. |
popperConfig |
null, réad, feidhm | null |
Chun cumraíocht réamhshocraithe Bootstrap Popper a athrú, féach cumraíocht Popper . Nuair a úsáidtear feidhm chun cumraíocht Popper a chruthú, glaoitear í le réad a bhfuil cumraíocht réamhshocraithe Popper Bootstrap ann. Cabhraíonn sé leat an réamhshocrú a úsáid agus a chumasc le do chumraíocht féin. Caithfidh an fheidhm réad cumraíochta a thabhairt ar ais do Popper. |
sanitize |
Boole | true |
Cumasaigh nó díchumasaigh an sláintíocht. Má chuirtear i ngníomh é 'template' , 'content' agus 'title' déanfar roghanna a shláintiú. |
sanitizeFn |
null, feidhm | null |
Anseo is féidir leat d'fheidhm sláintíochta féin a sholáthar. Féadfaidh sé seo a bheith úsáideach más fearr leat leabharlann thiomanta a úsáid chun sláintíocht a dhéanamh. |
selector |
teaghrán, bréagach | false |
Má chuirtear roghnóir ar fáil, déanfar réada aníos a tharmligean chuig na spriocanna sonraithe. Go praiticiúil, úsáidtear é seo chun popovers a chur i bhfeidhm ar eilimintí DOM ( jQuery.on tacaíocht) a chuirtear leis go dinimiciúil. Féach ar an gceist seo agus sampla faisnéiseach . |
template |
teaghrán | '<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-inner"></div></div>' |
Bunús HTML le húsáid agus an popover á chruthú. Déanfar na popover's title a instealladh isteach sa .popover-inner . .popover-arrow beidh an popover saighead. .popover Ba chóir go mbeadh an rang agus an eilimint fillte is forimeallaí role="popover" . |
title |
teaghrán, eilimint, feidhm | '' |
Luach teidil réamhshocraithe mura title bhfuil an aitreabúid i láthair. Má thugtar feidhm, glaofar í lena this tacar tagartha don eilimint a bhfuil an popover ceangailte léi. |
trigger |
teaghrán | 'hover focus' |
Conas a spreagtar aníos: cliceáil, ainliú, fócas, lámhleabhar. Is féidir leat pas a fháil truicear iolrach; iad a scaradh le spás. 'manual' go gcuireann sé in iúl go spreagfar an popover go ríomhchláraithe tríd an .popover('show') , .popover('hide') agus .popover('toggle') modhanna; ní féidir an luach seo a chomhcheangal le haon truicear eile. 'hover' as féin a bheidh mar thoradh ar popovers nach féidir a spreagadh tríd an méarchlár, agus ba chóir a úsáid ach amháin má tá modhanna eile chun an t-eolas céanna a chur in iúl d'úsáideoirí méarchláir i láthair. |
Tréithe sonraí le haghaidh popovers aonair
De rogha air sin, is féidir roghanna le haghaidh popovers aonair a shonrú trí úsáid a bhaint as tréithe sonraí, mar a mhínítear thuas.
Ag baint úsáide as feidhm lepopperConfig
const popover = new bootstrap.Popover(element, {
popperConfig(defaultBsPopperConfig) {
// const newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Modhanna
Modhanna agus aistrithe asincrónacha
Tá gach modh API asincrónach agus cuireann siad tús le haistriú . Filleann siad ar an nglaoiteoir a luaithe a chuirtear tús leis an aistriú ach sula gcríochnaíonn sé . Ina theannta sin, ní thabharfar aird ar ghlao modha ar chomhpháirt trasdula .
Féach ar ár gcáipéisíocht JavaScript le haghaidh tuilleadh eolais .
Modh | Cur síos |
---|---|
disable |
Baineann sé seo as an gcumas chun an popover eilimint a thaispeáint. Ní bheidh an popover in ann a thaispeáint ach amháin má tá sé ath-chumasaithe. |
dispose |
Seithí agus scriosann popover eilimint (Baintear sonraí stóráilte ar an eilimint DOM). Ní féidir popovers a úsáideann tarmligean (a chruthaítear ag baint úsáide as an selector rogha ) a scrios ina n-aonar ar eilimintí truicear sliocht. |
enable |
Tugann sé an cumas a thaispeáint do popover eilimint. Tá popovers cumasaithe de réir réamhshocraithe. |
getInstance |
Modh statach a cheadaíonn duit an t-ásc aníos a bhaineann le heilimint DOM a fháil. |
getOrCreateInstance |
Modh statach a cheadaíonn duit an cás aníos a bhaineann le heilimint DOM a fháil, nó ceann nua a chruthú ar eagla nach dtosófaí é. |
hide |
Folaíonn popover eilimint. Filleann sé ar an nglaoiteoir sula mbíonn an t-rabús aníos curtha i bhfolach (ie sula hidden.bs.popover dtarlaíonn an teagmhas). Meastar gur “lámhleabhar” é seo a chuireann faoi deara an popover. |
setContent |
Tugann sé bealach chun ábhar an popover a athrú tar éis é a thúsú. |
show |
Nochtann popover eilimint. Filleann sé ar an nglaoiteoir sula dtaispeántar an t-athrú aníos (ie sula shown.bs.popover dtarlaíonn an teagmhas). Meastar gur “lámhleabhar” é seo a chuireann faoi deara an popover. Ní thaispeánfar popovers a bhfuil a theideal agus a n-ábhar ar fad nialasach. |
toggle |
Scoránaigh eilimint a popover. Filleann sé ar an nglaoiteoir sula dtaispeántar nó sula gcuirtear i bhfolach an t-amóg aníos (.i. sula dtarlaíonn shown.bs.popover nó sula hidden.bs.popover dtarlaíonn an teagmhas). Meastar gur “lámhleabhar” é seo a chuireann faoi deara an popover. |
toggleEnabled |
Scoránaigh an cumas chun popover eilimint a thaispeáint nó a cheilt. |
update |
Nuashonraítear suíomh popover eilimint. |
// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance
// setContent example
myPopover.setContent({
'.popover-header': 'another title',
'.popover-body': 'another content'
})
setContent
modh le
object
hargóint, áit a bhfuil gach maoin-eochair ina
string
roghnóir bailí laistigh den teimpléad aníos, agus is féidir gach luach maoine gaolmhar a bheith
string
|
element
|
function
|
null
Imeachtaí
Imeacht | Cur síos |
---|---|
hide.bs.popover |
Cuirtear an teagmhas seo ar ceal láithreach nuair hide a ghlaoitear an modh ásc. |
hidden.bs.popover |
Tá an teagmhas seo bréan nuair a bhíonn an aníos aníos curtha i bhfolach ón úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích). |
inserted.bs.popover |
Cuirtear an teagmhas seo ar ceal tar éis na show.bs.popover hócáide nuair a chuirtear an teimpléad aníos leis an DOM. |
show.bs.popover |
Téann an teagmhas seo chun solais láithreach nuair show a ghlaoitear an modh ásc. |
shown.bs.popover |
Tá an teagmhas seo bréan nuair a bhíonn an aníos infheicthe ag an úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích). |
const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
// do something...
})