પોપોવર્સ
બૂટસ્ટ્રેપ પોપોવર્સ ઉમેરવા માટે દસ્તાવેજીકરણ અને ઉદાહરણો, જેમ કે iOS માં જોવા મળે છે, તમારી સાઇટ પરના કોઈપણ ઘટકમાં.
ઝાંખી
પોપઓવર પ્લગઇનનો ઉપયોગ કરતી વખતે જાણવા જેવી બાબતો:
- પોપોવર્સ પોઝિશનિંગ માટે 3જી પાર્ટી લાઇબ્રેરી પોપર પર આધાર રાખે છે . તમારે bootstrap.js પહેલા popper.min.js
bootstrap.bundle.min.js
નો સમાવેશ કરવો જોઈએ અથવા પોપોવર કામ કરવા માટે /bootstrap.bundle.js
જેમાં પોપર છે તેનો ઉપયોગ કરો! - પોપોવર્સને અવલંબન તરીકે ટૂલટિપ પ્લગઇનની જરૂર છે.
- પોપોવર્સ કામગીરીના કારણોસર પસંદ કરવામાં આવે છે, તેથી તમારે તેમને જાતે જ પ્રારંભ કરવું આવશ્યક છે .
- શૂન્ય-લંબાઈ
title
અનેcontent
મૂલ્યો ક્યારેય પોપઓવર બતાવશે નહીં. container: 'body'
વધુ જટિલ ઘટકો (જેમ કે અમારા ઇનપુટ જૂથો, બટન જૂથો, વગેરે) માં રેન્ડરિંગ સમસ્યાઓ ટ���ળવા માટે સ્પષ્ટ કરો .- છુપાયેલા તત્વો પર પોપઓવરને ટ્રિગર કરવું કામ કરશે નહીં.
.disabled
રેપર એલિમેન્ટ પર અથવાdisabled
તત્વો માટે પોપોવર્સ ટ્રિગર થવું આવશ્યક છે.- જ્યારે બહુવિધ રેખાઓ પર લપેટતા એન્કરથી ટ્રિગર થાય છે, ત્યારે પોપોવર્સ એન્કરની એકંદર પહોળાઈ વચ્ચે કેન્દ્રિત કરવામાં આવશે. આ વર્તનને ટાળવા માટે
.text-nowrap
તમારા s નો ઉપયોગ કરો.<a>
- પોપોવર્સ તેમના અનુરૂપ ઘટકોને DOMમાંથી દૂર કરવામાં આવે તે પહેલાં છુપાયેલા હોવા જોઈએ.
- પડછાયા DOM ની અંદરના તત્વને કારણે પોપોવર્સ ટ્રિગર થઈ શકે છે.
prefers-reduced-motion
મીડિયા ક્વેરી પર આધારિત છે. અમારા ઍક્સેસિબિલિટી દસ્તાવેજીકરણનો ઘટાડો ગતિ વિભાગ જુઓ
.
કેટલાક ઉદાહરણો સાથે પોપોવર્સ કેવી રીતે કાર્ય કરે છે તે જોવા માટે વાંચવાનું ચાલુ રાખો.
ઉદાહરણ: દરેક જગ્યાએ પોપોવર્સ સક્ષમ કરો
પૃષ્ઠ પરના તમામ પોપોવર્સને પ્રારંભ કરવાની એક રીત એ છે કે તેમને તેમની data-bs-toggle
વિશેષતા દ્વારા પસંદ કરવી:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
ઉદાહરણ: container
વિકલ્પનો ઉપયોગ કરવો
જ્યારે તમારી પાસે પેરેંટ એલિમેન્ટ પર કેટલીક શૈલીઓ હોય જે પોપઓવરમાં દખલ કરે છે, ત્યારે તમે એક કસ્ટમનો ઉલ્લેખ કરવા માગો છો container
જેથી કરીને પોપઓવરનું HTML તેના બદલે તે ઘટકમાં દેખાય.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
ઉદાહરણ
<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>
ચાર દિશાઓ
ચાર વિકલ્પો ઉપલબ્ધ છે: ઉપર, જમણે, નીચે અને ડાબે સંરેખિત. RTL માં બુટસ્ટ્રેપનો ઉપયોગ કરતી વખતે દિશાઓ પ્રતિબિંબિત થાય છે.
<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>
આગલી ક્લિક પર કાઢી નાખો
focus
ટૉગલ એલિમેન્ટ કરતાં અલગ તત્વના વપરાશકર્તાના આગલા ક્લિક પરના પોપઓવરને કાઢી નાખવા માટે ટ્રિગરનો ઉપયોગ કરો .
ડિસમિસ-ઓન-નેક્સ્ટ-ક્લિક માટે ચોક્કસ માર્કઅપ જરૂરી છે
યોગ્ય ક્રોસ-બ્રાઉઝર અને ક્રોસ-પ્લેટફોર્મ વર્તણૂક માટે, તમારે ટૅગનો ઉપયોગ કરવો જોઈએ <a>
, ટૅગનો નહીં<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'
})
અક્ષમ તત્વો
એટ્રિબ્યુટ સાથેના ઘટકો disabled
ઇન્ટરેક્ટિવ નથી, એટલે કે વપરાશકર્તાઓ પોપઓવર (અથવા ટૂલટિપ) ટ્રિગર કરવા માટે તેમને હોવર અથવા ક્લિક કરી શકતા નથી. વર્કઅરાઉન્ડ તરીકે, તમે રેપરમાંથી પોપઓવરને ટ્રિગર કરવા માગો છો <div>
અથવા <span>
, આદર્શ રીતે કીબોર્ડ-ફોકસેબલનો ઉપયોગ કરીને tabindex="0"
.
અક્ષમ પોપઓવર ટ્રિગર્સ માટે, તમે પણ પસંદ કરી શકો છો data-bs-trigger="hover focus"
જેથી પોપઓવર તમારા વપરાશકર્તાઓને તાત્કાલિક દ્રશ્ય પ્રતિસાદ તરીકે દેખાય કારણ કે તેઓ અક્ષમ તત્વ પર ક્લિક કરવાની અપેક્ષા રાખતા નથી.
<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>
સસ
ચલો
$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);
ઉપયોગ
JavaScript દ્વારા પોપોવર્સ સક્ષમ કરો:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
કીબોર્ડ અને સહાયક ટેક્નોલોજી વપરાશકર્તાઓ માટે પોપઓવર કાર્ય કરે છે
કીબોર્ડ વપરાશકર્તાઓને તમારા પોપોવર્સને સક્રિય કરવાની મંજૂરી આપવા માટે, તમારે તેમને ફક્ત HTML ઘટકોમાં ઉમેરવું જોઈએ જે પરંપરાગત રીતે કીબોર્ડ-ફોકસેબલ અને ઇન્ટરેક્ટિવ હોય (જેમ કે લિંક્સ અથવા ફોર્મ નિયંત્રણો). જો કે એટ્રિબ્યુટ ઉમેરીને મનસ્વી HTML તત્વો (જેમ કે <span>
s) ને ફોકસેબલ બનાવી શકાય છે tabindex="0"
, આ કીબોર્ડ યુઝર્સ માટે નોન-ઇન્ટરેક્ટિવ એલિમેન્ટ્સ પર સંભવિત રીતે હેરાન કરનાર અને ગૂંચવણમાં મૂકે તેવા ટેબ સ્ટોપ્સ ઉમેરશે, અને મોટાભાગની સહાયક તકનીકો હાલમાં આ પરિસ્થિતિમાં પોપઓવરની સામગ્રીની જાહેરાત કરતી નથી. . વધુમાં, hover
તમારા પોપોવર્સ માટે ટ્રિગર તરીકે ફક્ત તેના પર આધાર રાખશો નહીં, કારણ કે આ કીબોર્ડ વપરાશકર્તાઓ માટે તેમને ટ્રિગર કરવાનું અશક્ય બનાવશે.
જ્યારે તમે વિકલ્પ સાથે પોપોવર્સમાં સમૃદ્ધ, સંરચિત HTML દાખલ કરી શકો છો html
, અમે ભારપૂર્વક ભલામણ કરીએ છીએ કે તમે સામગ્રીની વધુ પડતી માત્રા ઉમેરવાનું ટાળો. aria-describedby
હાલમાં જે રીતે પોપોવર્સ કામ કરે છે તે એ છે કે, એકવાર પ્રદર્શિત થયા પછી, તેમની સામગ્રી એટ્રિબ્યુટ સાથે ટ્રિગર એલિમેન્ટ સાથે જોડાયેલી છે . પરિણામે, એક લાંબી, અવિરત સ્ટ્રીમ તરીકે સહાયક ટેક્નોલોજી વપરાશકર્તાઓ માટે પોપઓવરની સંપૂર્ણ સામગ્રીની જાહેરાત કરવામાં આવશે.
વધુમાં, જ્યારે તમારા પોપઓવરમાં ઇન્ટરેક્ટિવ કંટ્રોલ (જેમ કે ફોર્મ એલિમેન્ટ્સ અથવા લિંક્સ) શામેલ કરવાનું શક્ય છે (આ તત્વોને મંજૂર લક્ષણો અને ટૅગ્સમાં ઉમેરીને allowList
), ત્યારે ધ્યાન રાખો કે હાલમાં પોપઓવર કીબોર્ડ ફોકસ ઓર્ડરનું સંચાલન કરતું નથી. જ્યારે કીબોર્ડ યુઝર પોપઓવર ખોલે છે, ત્યારે ફોકસ ટ્રિગરિંગ એલિમેન્ટ પર રહે છે, અને પોપઓવર સામાન્ય રીતે ડોક્યુમેન્ટના સ્ટ્રક્ચરમાં ટ્રિગરને તરત જ અનુસરતું નથી, તેની કોઈ ગેરેંટી નથી કે આગળ વધવું/દબાવુંTABકીબોર્ડ વપરાશકર્તાને પોપઓવરમાં જ ખસેડશે. ટૂંકમાં, ફક્ત પોપઓવરમાં ઇન્ટરેક્ટિવ નિયંત્રણો ઉમેરવાથી કીબોર્ડ વપરાશકર્તાઓ અને સહાયક તકનીકોના વપરાશકર્તાઓ માટે આ નિયંત્રણો અગમ્ય/અનુપયોગી બની શકે છે, અથવા ઓછામાં ઓછા એક અતાર્કિક એકંદર ફોકસ ઓર્ડર માટે બનાવે છે. આ કિસ્સાઓમાં, તેના બદલે મોડલ સંવાદનો ઉપયોગ કરવાનું વિચારો.
વિકલ્પો
વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-bs-
, જેમ કે માં ઉમેરો data-bs-animation=""
. ડેટા વિશેષતાઓ દ્વારા વિકલ્પો પસાર કરતી વખતે વિકલ્પ નામના કેસ પ્રકારને કેમલકેસમાંથી કબાબ-કેસમાં બદલવાની ખાતરી કરો. ઉદાહરણ તરીકે, ઉપયોગ કરવાને બદલે data-bs-customClass="beautifier"
, ઉપયોગ કરો data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, અને
allowList
વિકલ્પો ડેટા લક્ષણોનો ઉપયોગ કરીને પૂરા પાડી શકાતા નથી.
નામ | પ્રકાર | ડિફૉલ્ટ | વર્ણન |
---|---|---|---|
animation |
બુલિયન | true |
પોપઓવર પર CSS ફેડ ટ્રાન્ઝિશન લાગુ કરો |
container |
શબ્દમાળા | તત્વ | ખોટું | false |
પોપઓવરને ચોક્કસ તત્વ સાથે જોડે છે. ઉદાહરણ |
content |
શબ્દમાળા | તત્વ | કાર્ય | '' |
|
delay |
નંબર | પદાર્થ | 0 |
પોપઓવર (ms) બતાવવામાં અને છુપાવવામાં વિલંબ - મેન્યુઅલ ટ્રિગર પ્રકાર પર લાગુ થતો નથી જો નંબર પૂરો પાડવામાં આવે છે, તો છુપાવો/શો બંને માટે વિલંબ લાગુ પડે છે ઑબ્જેક્ટ માળખું છે: |
html |
બુલિયન | false |
પોપઓવરમાં HTML દાખલ કરો. જો ખોટું હોય, તો innerText પ્રોપર્ટીનો ઉપયોગ DOM માં સામગ્રી દાખલ કરવા માટે કરવામાં આવશે. જો તમે XSS હુમલાઓ વિશે ચિંતિત હોવ તો ટેક્સ્ટનો ઉપયોગ કરો. |
placement |
શબ્દમાળા | કાર્ય | 'right' |
પોપઓવરને કેવી રીતે સ્થાન આપવું - ઓટો | ટોચ | નીચે | ડાબે | અધિકાર જ્યારે ફંક્શનનો ઉપયોગ પ્લેસમેન્ટ નક્કી કરવા માટે થાય છે, ત્યારે તેને પોપઓવર DOM નોડ સાથે તેની પ્રથમ દલીલ તરીકે અને ટ્રિગરિંગ ઘટક DOM નોડને તેના બીજા તરીકે કહેવામાં આવે છે. સંદર્ભ |
selector |
શબ્દમાળા | ખોટું | false |
જો પસંદગીકાર પ્રદાન કરવામાં આવે, તો પોપઓવર ઑબ્જેક્ટ્સ ઉલ્લેખિત લક્ષ્યોને સોંપવામાં આવશે. વ્યવહારમાં, આનો ઉપયોગ પોપોવર્સ ઉમેરવા માટે ગતિશીલ HTML સામગ્રીને સક્ષમ કરવા માટે થાય છે. આ અને એક માહિતીપ્રદ ઉદાહરણ જુઓ . |
template |
તાર | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
પોપઓવર બનાવતી વખતે ઉપયોગ કરવા માટે બેઝ HTML. પોપઓવરને પોપઓવરને
સૌથી બહારના રેપર તત્વમાં |
title |
શબ્દમાળા | તત્વ | કાર્ય | '' |
|
trigger |
તાર | 'click' |
કેવી રીતે પોપઓવર ટ્રિગર થાય છે - ક્લિક કરો | હોવર | ફોકસ | મેન્યુઅલ તમે બહુવિધ ટ્રિગર્સ પસાર કરી શકો છો; તેમને જગ્યા સાથે અલગ કરો. manual અન્ય કોઈપણ ટ્રિગર સાથે જોડી શકાતું નથી. |
fallbackPlacements |
એરે | ['top', 'right', 'bottom', 'left'] |
એરેમાં પ્લેસમેન્ટની યાદી આપીને ફોલબેક પ્લેસમેન્ટ વ્યાખ્યાયિત કરો (પસંદગીના ક્રમમાં). વધુ માહિતી માટે પોપરના વર્તન દસ્તાવેજોનો સંદર્ભ લો |
boundary |
શબ્દમાળા | તત્વ | 'clippingParents' |
પોપઓવરની ઓવરફ્લો અવરોધ સીમા (ફક્ત પોપરના નિવારણ ઓવરફ્લો મોડિફાયરને લાગુ પડે છે). મૂળભૂત રીતે તે 'clippingParents' HTMLElement સંદર્ભ (માત્ર JavaScript દ્વારા) છે અને સ્વીકારી શકે છે. વધુ માહિતી માટે Popper's detectOverflow docs નો સંદર્ભ લો . |
customClass |
શબ્દમાળા | કાર્ય | '' |
જ્યારે તે બતાવવામાં આવે ત્યારે પોપઓવરમાં વર્ગો ઉમેરો. નોંધ કરો કે આ વર્ગો નમૂનામાં ઉલ્લેખિત કોઈપણ વર્ગો ઉપરાંત ઉમેરવામાં આવશે. બહુવિધ વર્ગો ઉમેરવા માટે, તેમને જગ્યાઓ સાથે અલગ કરો: તમે એક ફંક્શન પણ પાસ કરી શકો છો કે જેમાં વધારાના વર્ગના નામો ધરાવતી સિંગલ સ્ટ્રિંગ પરત કરવી જોઈએ. |
sanitize |
બુલિયન | true |
સેનિટાઇઝેશનને સક્ષમ અથવા અક્ષમ કરો. જો સક્રિય થાય છે 'template' , 'content' અને 'title' વિકલ્પોને સેનિટાઇઝ કરવામાં આવશે. અમારા JavaScript દસ્તાવેજીકરણમાં સેનિટાઇઝર વિભાગ જુઓ . |
allowList |
પદાર્થ | ડિફૉલ્ટ મૂલ્ય | ઑબ્જેક્ટ જેમાં માન્ય લક્ષણો અને ટૅગ્સ શામેલ છે |
sanitizeFn |
નલ | કાર્ય | null |
અહીં તમે તમારું પોતાનું સેનિટાઇઝ ફંક્શન આપી શકો છો. જો તમે સેનિટાઈઝેશન કરવા માટે સમર્પિત પુસ્તકાલયનો ઉપયોગ કરવાનું પસંદ કરો તો આ ઉપયોગી થઈ શકે છે. |
offset |
એરે | શબ્દમાળા | કાર્ય | [0, 8] |
તેના લક્ષ્યની તુલનામાં પોપઓવરની ઓફસેટ. તમે અલ્પવિરામથી વિભાજિત મૂલ્યો સાથે ડેટા વિશેષતાઓમાં સ્ટ્રિંગ પસાર કરી શકો છો જેમ કે: જ્યારે ઑફસેટ નક્કી કરવા માટે ફંક્શનનો ઉપયોગ કરવામાં આવે છે, ત્યારે તેને પોપર પ્લેસમ��ન્ટ, રેફરન્સ ધરાવતા ઑબ્જેક્ટ સાથે બોલાવવામાં આવે છે અને પોપર તેની પ્રથમ દલીલ તરીકે રેક્ટ કરે છે. ટ્રિગરિંગ એલિમેન્ટ DOM નોડ બીજી દલીલ તરીકે પસાર થાય છે. ફંક્શનને બે સંખ્યાઓ સાથે એરે પરત કરવું આવશ્યક છે: . વધુ માહિતી માટે પોપરના ઓફસેટ દસ્તાવેજોનો સંદર્ભ લો . |
popperConfig |
નલ | પદાર્થ | કાર્ય | null |
બુટસ્ટ્રેપના ડિફોલ્ટ પોપર રૂપરેખાને બદલવા માટે, પોપરનું રૂપરેખાંકન જુઓ . જ્યારે પોપર કન્ફિગરેશન બનાવવા માટે ફંક્શનનો ઉપયોગ કરવામાં આવે છે, ત્યારે તેને એવા ઑબ્જેક્ટ સાથે બોલાવવામાં આવે છે જેમાં બુટસ્ટ્રેપનું ડિફોલ્ટ પોપર કન્ફિગરેશન હોય છે. તે તમને તમારા પોતાના રૂપરેખાંકન સાથે ડિફોલ્ટનો ઉપયોગ કરવામાં અને મર્જ કરવામાં મદદ કરે છે. ફંક્શને પોપર માટે રૂપરેખાંકન ઑબ્જેક્ટ પરત કરવું આવશ્યક છે. |
વ્યક્તિગત પોપોવર્સ માટે ડેટા લક્ષણો
વ્યક્તિગત પોપોવર્સ માટેના વિકલ્પો વૈકલ્પિક રીતે ડેટા એટ્રિબ્યુટ્સના ઉપયોગ દ્વારા સ્પષ્ટ કરી શકાય છે, જેમ ઉપર સમજાવ્યું છે.
સાથે ફંક્શનનો ઉપયોગ કરવોpopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
પદ્ધતિઓ
અસુમેળ પદ્ધતિઓ અને સંક્રમણો
બધી API પદ્ધતિઓ અસુમેળ છે અને સંક્રમણ શરૂ કરે છે . સંક્રમણ શરૂ થતાંની સાથે જ તેઓ કૉલર પાસે પાછા ફરે છે પરંતુ તે સમાપ્ત થાય તે પહેલાં . વધુમાં, સંક્રમણ ઘટક પર પદ્ધતિ કૉલ અવગણવામાં આવશે .
બતાવો
તત્વના પોપઓવરને દર્શાવે છે. પોપઓવર વાસ્તવમાં બતાવવામાં આવે તે પહેલાં કૉલર પર પાછા ફરે છે (એટલે કે shown.bs.popover
ઇવેન્ટ થાય તે પહેલાં). આને પોપઓવરનું "મેન્યુઅલ" ટ્રિગરિંગ માનવામાં આવે છે. પોપોવર કે જેનું શીર્ષક અને સામગ્રી બંને શૂન્ય-લેન્થ હોય તે ક્યારેય પ્રદર્શિત થતા નથી.
myPopover.show()
છુપાવો
તત્વના પોપઓવરને છુપાવે છે. પોપઓવર વાસ્તવમાં છુપાયેલ હોય તે પહેલાં (એટલે કે hidden.bs.popover
ઘટના બને તે પહેલાં) કોલર પાસે પરત આવે છે. આને પોપઓવરનું "મેન્યુઅલ" ટ્રિગરિંગ માનવામાં આવે છે.
myPopover.hide()
ટૉગલ
તત્વના પોપઓવરને ટૉગલ કરે છે. પોપઓવર વાસ્તવમાં બતાવવામાં આવે અથવા છુપાવવામાં આવે તે પહેલાં (એટલે કે ઘટના shown.bs.popover
અથવા hidden.bs.popover
ઘટના બને તે પહેલાં) કૉલર પર પાછા ફરે છે. આને પોપઓવરનું "મેન્યુઅલ" ટ્રિગરિંગ માનવામાં આવે છે.
myPopover.toggle()
નિકાલ
તત્વના પોપઓવરને છુપાવે છે અને તેનો નાશ કરે છે (DOM તત્વ પર સંગ્રહિત ડેટાને દૂર કરે છે). ડેલિગેશનનો ઉપયોગ કરતા પોપોવર્સ (જે વિકલ્પનો ઉપયોગ કરીનેselector
બનાવવામાં આવે છે ) વંશજ ટ્રિગર તત્વો પર વ્યક્તિગત રીતે નાશ કરી શકાતા નથી.
myPopover.dispose()
સક્ષમ કરો
એલિમેન્ટના પોપઓવરને બતાવવાની ક્ષમતા આપે છે. પોપોવર્સ ડિફૉલ્ટ રૂપે સક્ષમ છે.
myPopover.enable()
નિષ્ક્રિય
એલિમેન્ટના પોપઓવર બતાવવાની ક્ષમતાને દૂર કરે છે. પોપઓવર ફક્ત ત્યારે જ બતાવવામાં સક્ષમ હશે જો તે ફરીથી સક્ષમ હશે.
myPopover.disable()
ટૉગલ સક્ષમ
એલિમેન્ટના પોપઓવરને બતાવવા અથવા છુપાવવા માટેની ક્ષમતાને ટૉગલ કરે છે.
myPopover.toggleEnabled()
અપડેટ
તત્વના પોપઓવરની સ્થિતિને અપડેટ કરે છે.
myPopover.update()
getInstance
સ્થિર પદ્ધતિ જે તમને DOM તત્વ સાથે સંકળાયેલ પોપઓવર દાખલા મેળવવા માટે પરવાનગી આપે છે
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getOrCreateInstance
સ્ટેટિક મેથડ જે તમને DOM એલિમેન્ટ સાથે સંકળાયેલ પોપઓવર ઇન્સ્ટન્સ મેળવવાની પરવાનગી આપે છે અથવા જો તે આરંભ ન થયું હોય તો એક નવું બનાવવા માટે
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
ઘટનાઓ
ઇવેન્ટનો પ્રકાર | વર્ણન |
---|---|
show.bs.popover | show જ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે. |
દર્શાવવામાં આવ્યું છે.bs.popover | જ્યારે પોપઓવર વપરાશકર્તાને દૃશ્યક્ષમ બનાવવામાં આવે ત્યારે આ ઇવેન્ટ ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે). |
hide.bs.popover | hide જ્યારે ઇન્સ્ટન્સ મેથડ બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ કાઢી નાખવામાં આવે છે. |
hidden.bs.popover | જ્યારે પોપઓવર વપરાશકર્તાથી છુપાવવાનું સમાપ્ત કરે છે ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે). |
inserted.bs.popover | show.bs.popover જ્યારે પોપઓવર ટેમ્પલેટ DOM માં ઉમેરવામાં આવ્યું હોય ત્યારે આ ઇવેન્ટને ઇવેન્ટ પછી ફાયર કરવામાં આવે છે. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})