મુખ્ય સામગ્રી પર જાઓ ડૉક્સ નેવિગેશન પર જાઓ
in English

પોપોવર્સ

બૂટસ્ટ્રેપ પોપોવર્સ ઉમેરવા માટે દસ્તાવેજીકરણ અને ઉદાહરણો, જેમ કે iOS માં જોવા મળે છે, તમારી સાઇટ પરના કોઈપણ ઘટકમાં.

ઝાંખી

પોપઓવર પ્લગઇનનો ઉપયોગ કરતી વખતે જાણવા જેવી બાબતો:

  • પોપોવર્સ પોઝિશનિંગ માટે 3જી પાર્ટી લાઇબ્રેરી પોપર પર આધાર રાખે છે . તમારે bootstrap.js પહેલા popper.min.jsbootstrap.bundle.min.js નો સમાવેશ કરવો જોઈએ અથવા પોપોવર કામ કરવા માટે / bootstrap.bundle.jsજેમાં પોપર છે તેનો ઉપયોગ કરો!
  • પોપોવર્સને અવલંબન તરીકે ટૂલટિપ પ્લગઇનની જરૂર છે.
  • પોપોવર્સ કામગીરીના કારણોસર પસંદ કરવામાં આવે છે, તેથી તમારે તેમને જાતે જ પ્રારંભ કરવું આવશ્યક છે .
  • શૂન્ય-લંબાઈ titleઅને contentમૂલ્યો ક્યારેય પોપઓવર બતાવશે નહીં.
  • container: 'body'વધુ જટિલ ઘટકો (જેમ કે અમારા ઇનપુટ જૂથો, બટન જૂથો, વગેરે) માં રેન્ડરિંગ સમસ્યાઓ ટ���ળવા માટે સ્પષ્ટ કરો .
  • છુપાયેલા તત્વો પર પોપઓવરને ટ્રિગર કરવું કામ કરશે નહીં.
  • .disabledરેપર એલિમેન્ટ પર અથવા disabledતત્વો માટે પોપોવર્સ ટ્રિગર થવું આવશ્યક છે.
  • જ્યારે બહુવિધ રેખાઓ પર લપેટતા એન્કરથી ટ્રિગર થાય છે, ત્યારે પોપોવર્સ એન્કરની એકંદર પહોળાઈ વચ્ચે કેન્દ્રિત કરવામાં આવશે. આ વર્તનને ટાળવા માટે .text-nowrapતમારા s નો ઉપયોગ કરો.<a>
  • પોપોવર્સ તેમના અનુરૂપ ઘટકોને DOMમાંથી દૂર કરવામાં આવે તે પહેલાં છુપાયેલા હોવા જોઈએ.
  • પડછાયા DOM ની અંદરના તત્વને કારણે પોપોવર્સ ટ્રિગર થઈ શકે છે.
ડિફૉલ્ટ રૂપે, આ ​​ઘટક બિલ્ટ-ઇન કન્ટેન્ટ સેનિટાઇઝરનો ઉપયોગ કરે છે, જે સ્પષ્ટપણે મંજૂર ન હોય તેવા કોઈપણ HTML ઘટકોને બહાર કાઢે છે. વધુ વિગતો માટે અમારા JavaScript દસ્તાવેજીકરણમાં સેનિટાઈઝર વિભાગ જુઓ .
આ ઘટકની એનિમેશન અસર 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

પોપઓવરને ચોક્કસ તત્વ સાથે જોડે છે. ઉદાહરણ container: 'body':. આ વિકલ્પ ખાસ કરીને ઉપયોગી છે કારણ કે તે તમને ટ્રિગરિંગ એલિમેન્ટની નજીકના ડોક્યુમેન્ટના ફ્લોમાં પોપઓવરને પોઝિશન કરવાની મંજૂરી આપે છે - જે વિન્ડો રિસાઈઝ દરમિયાન પોપઓવરને ટ્રિગરિંગ એલિમેન્ટથી દૂર જતા અટકાવશે.

content શબ્દમાળા | તત્વ | કાર્ય ''

data-bs-contentજો વિશેષતા હાજર ન હોય તો ડિફૉલ્ટ સામગ્રી મૂલ્ય .

thisજો કોઈ ફંક્શન આપવામાં આવ્યું હોય, તો તેને પોપઓવર સાથે જોડાયેલ તત્વ સાથે તેના સંદર્ભ સેટ સાથે બોલાવવામાં આવશે .

delay નંબર | પદાર્થ 0

પોપઓવર (ms) બતાવવામાં અને છુપાવવામાં વિલંબ - મેન્યુઅલ ટ્રિગર પ્રકાર પર લાગુ થતો નથી

જો નંબર પૂરો પાડવામાં આવે છે, તો છુપાવો/શો બંને માટે વિલંબ લાગુ પડે છે

ઑબ્જેક્ટ માળખું છે:delay: { "show": 500, "hide": 100 }

html બુલિયન false પોપઓવરમાં HTML દાખલ કરો. જો ખોટું હોય, તો innerTextપ્રોપર્ટીનો ઉપયોગ DOM માં સામગ્રી દાખલ કરવા માટે કરવામાં આવશે. જો તમે XSS હુમલાઓ વિશે ચિંતિત હોવ તો ટેક્સ્ટનો ઉપયોગ કરો.
placement શબ્દમાળા | કાર્ય 'right'

પોપઓવરને કેવી રીતે સ્થાન આપવું - ઓટો | ટોચ | નીચે | ડાબે | અધિકાર
જ્યારે autoનિર્દિષ્ટ કરવામાં આવે છે, ત્યારે તે ગતિશીલ રીતે પોપઓવરને ફરીથી દિશામાન કરશે.

જ્યારે ફંક્શનનો ઉપયોગ પ્લેસમેન્ટ નક્કી કરવા માટે થાય છે, ત્યારે તેને પોપઓવર DOM નોડ સાથે તેની પ્રથમ દલીલ તરીકે અને ટ્રિગરિંગ ઘટક DOM નોડને તેના બીજા તરીકે કહેવામાં આવે છે. સંદર્ભ thisપોપઓવર દાખલા પર સેટ કરેલ છે.

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માં ઇન્જેક્ટ કરવામાં આવશે .popover-header.

પોપઓવરને contentમાં ઇન્જેક્ટ કરવામાં આવશે .popover-body.

.popover-arrowપોપઓવરનું તીર બની જશે.

સૌથી બહારના રેપર તત્વમાં .popoverવર્ગ હોવો જોઈએ.

title શબ્દમાળા | તત્વ | કાર્ય ''

titleજો વિશેષતા હાજર ન હોય તો ડિફૉલ્ટ શીર્ષક મૂલ્ય .

thisજો કોઈ ફંક્શન આપવામાં આવ્યું હોય, તો તેને પોપઓવર સાથે જોડાયેલ તત્વ સાથે તેના સંદર્ભ સેટ સાથે બોલાવવામાં આવશે .

trigger તાર 'click' કેવી રીતે પોપઓવર ટ્રિગર થાય છે - ક્લિક કરો | હોવર | ફોકસ | મેન્યુઅલ તમે બહુવિધ ટ્રિગર્સ પસાર કરી શકો છો; તેમને જગ્યા સાથે અલગ કરો. manualઅન્ય કોઈપણ ટ્રિગર સાથે જોડી શકાતું નથી.
fallbackPlacements એરે ['top', 'right', 'bottom', 'left'] એરેમાં પ્લેસમેન્ટની યાદી આપીને ફોલબેક પ્લેસમેન્ટ વ્યાખ્યાયિત કરો (પસંદગીના ક્રમમાં). વધુ માહિતી માટે પોપરના વર્તન દસ્તાવેજોનો સંદર્ભ લો
boundary શબ્દમાળા | તત્વ 'clippingParents' પોપઓવરની ઓવરફ્લો અવરોધ સીમા (ફક્ત પોપરના નિવારણ ઓવરફ્લો મોડિફાયરને લાગુ પડે છે). મૂળભૂત રીતે તે 'clippingParents'HTMLElement સંદર્ભ (માત્ર JavaScript દ્વારા) છે અને સ્વીકારી શકે છે. વધુ માહિતી માટે Popper's detectOverflow docs નો સંદર્ભ લો .
customClass શબ્દમાળા | કાર્ય ''

જ્યારે તે બતાવવામાં આવે ત્યારે પોપઓવરમાં વર્ગો ઉમેરો. નોંધ કરો કે આ વર્ગો નમૂનામાં ઉલ્લેખિત કોઈપણ વર્ગો ઉપરાંત ઉમેરવામાં આવશે. બહુવિધ વર્ગો ઉમેરવા માટે, તેમને જગ્યાઓ સાથે અલગ કરો: 'class-1 class-2'.

તમે એક ફંક્શન પણ પાસ કરી શકો છો કે જેમાં વધારાના વર્ગના નામો ધરાવતી સિંગલ સ્ટ્રિંગ પરત કરવી જોઈએ.

sanitize બુલિયન true સેનિટાઇઝેશનને સક્ષમ અથવા અક્ષમ કરો. જો સક્રિય થાય છે 'template', 'content'અને 'title'વિકલ્પોને સેનિટાઇઝ કરવામાં આવશે. અમારા JavaScript દસ્તાવેજીકરણમાં સેનિટાઇઝર વિભાગ જુઓ .
allowList પદાર્થ ડિફૉલ્ટ મૂલ્ય ઑબ્જેક્ટ જેમાં માન્ય લક્ષણો અને ટૅગ્સ શામેલ છે
sanitizeFn નલ | કાર્ય null અહીં તમે તમારું પોતાનું સેનિટાઇઝ ફંક્શન આપી શકો છો. જો તમે સેનિટાઈઝેશન કરવા માટે સમર્પિત પુસ્તકાલયનો ઉપયોગ કરવાનું પસંદ કરો તો આ ઉપયોગી થઈ શકે છે.
offset એરે | શબ્દમાળા | કાર્ય [0, 8]

તેના લક્ષ્યની તુલનામાં પોપઓવરની ઓફસેટ. તમે અલ્પવિરામથી વિભાજિત મૂલ્યો સાથે ડેટા વિશેષતાઓમાં સ્ટ્રિંગ પસાર કરી શકો છો જેમ કે:data-bs-offset="10,20"

જ્યારે ઑફસેટ નક્કી કરવા માટે ફંક્શનનો ઉપયોગ કરવામાં આવે છે, ત્યારે તેને પોપર પ્લેસમ��ન્ટ, રેફરન્સ ધરાવતા ઑબ્જેક્ટ સાથે બોલાવવામાં આવે છે અને પોપર તેની પ્રથમ દલીલ તરીકે રેક્ટ કરે છે. ટ્રિગરિંગ એલિમેન્ટ DOM નોડ બીજી દલીલ તરીકે પસાર થાય છે. ફંક્શનને બે સંખ્યાઓ સાથે એરે પરત કરવું આવશ્યક છે: .[skidding, distance]

વધુ માહિતી માટે પોપરના ઓફસેટ દસ્તાવેજોનો સંદર્ભ લો .

popperConfig નલ | પદાર્થ | કાર્ય null

બુટસ્ટ્રેપના ડિફોલ્ટ પોપર રૂપરેખાને બદલવા માટે, પોપરનું રૂપરેખાંકન જુઓ .

જ્યારે પોપર કન્ફિગરેશન બનાવવા માટે ફંક્શનનો ઉપયોગ કરવામાં આવે છે, ત્યારે તેને એવા ઑબ્જેક્ટ સાથે બોલાવવામાં આવે છે જેમાં બુટસ્ટ્રેપનું ડિફોલ્ટ પોપર કન્ફિગરેશન હોય છે. તે તમને તમારા પોતાના રૂપરેખાંકન સાથે ડિફોલ્ટનો ઉપયોગ કરવામાં અને મર્જ કરવામાં મદદ કરે છે. ફંક્શને પોપર માટે રૂપરેખાંકન ઑબ્જેક્ટ પરત કરવું આવશ્યક છે.

વ્યક્તિગત પોપોવર્સ માટે ડેટા લક્ષણો

વ્યક્તિગત પોપોવર્સ માટેના વિકલ્પો વૈકલ્પિક રીતે ડેટા એટ્રિબ્યુટ્સના ઉપયોગ દ્વારા સ્પષ્ટ કરી શકાય છે, જેમ ઉપર સમજાવ્યું છે.

સાથે ફંક્શનનો ઉપયોગ કરવોpopperConfig

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

પદ્ધતિઓ

અસુમેળ પદ્ધતિઓ અને સંક્રમણો

બધી API પદ્ધતિઓ અસુમેળ છે અને સંક્રમણ શરૂ કરે છે . સંક્રમણ શરૂ થતાંની સાથે જ તેઓ કૉલર પાસે પાછા ફરે છે પરંતુ તે સમાપ્ત થાય તે પહેલાં . વધુમાં, સંક્રમણ ઘટક પર પદ્ધતિ કૉલ અવગણવામાં આવશે .

વધુ માહિતી માટે અમારા JavaScript દસ્તાવેજીકરણ જુઓ .

બતાવો

તત્વના પોપઓવરને દર્શાવે છે. પોપઓવર વાસ્તવમાં બતાવવામાં આવે તે પહેલાં કૉલર પર પાછા ફરે છે (એટલે ​​કે 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...
})