പ്രധാന ഉള്ളടക്കത്തിലേക്ക് പോകുക ഡോക്‌സ് നാവിഗേഷനിലേക്ക് പോകുക
in English

പോപോവറുകൾ

നിങ്ങളുടെ സൈറ്റിലെ ഏത് ഘടകത്തിലേക്കും iOS-ൽ കാണപ്പെടുന്നത് പോലെ ബൂട്ട്‌സ്‌ട്രാപ്പ് പോപ്പോവറുകൾ ചേർക്കുന്നതിനുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും.

അവലോകനം

പോപോവർ പ്ലഗിൻ ഉപയോഗിക്കുമ്പോൾ അറിഞ്ഞിരിക്കേണ്ട കാര്യങ്ങൾ:

  • Popovers പൊസിഷനിംഗിനായി മൂന്നാം കക്ഷി ലൈബ്രറി പോപ്പറിനെ ആശ്രയിക്കുന്നു . bootstrap.js-ന് മുമ്പ് നിങ്ങൾ popper.min.js ഉൾപ്പെടുത്തണം അല്ലെങ്കിൽ പോപ്പവർ പ്രവർത്തിക്കുന്നതിന് പോപ്പർ അടങ്ങിയിരിക്കുന്ന bootstrap.bundle.min.js/ ഉപയോഗിക്കുക!bootstrap.bundle.js
  • Popovers ഒരു ഡിപൻഡൻസിയായി ടൂൾടിപ്പ് പ്ലഗിൻ ആവശ്യമാണ്.
  • പ്രകടന കാരണങ്ങളാൽ പോപോവറുകൾ ഓപ്റ്റ്-ഇൻ ചെയ്യുന്നു, അതിനാൽ നിങ്ങൾ അവ സ്വയം ആരംഭിക്കണം .
  • പൂജ്യം നീളവും 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>) ഫോക്കസ് ചെയ്യാമെങ്കിലും 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

പോപ്പോവർ (മി.എസ്) കാണിക്കുന്നതിനും മറയ്ക്കുന്നതിനും കാലതാമസം - മാനുവൽ ട്രിഗർ തരത്തിന് ബാധകമല്ല

ഒരു നമ്പർ നൽകിയിട്ടുണ്ടെങ്കിൽ, മറയ്ക്കുക/കാണിക്കുക എന്നിവയ്‌ക്ക് കാലതാമസം ബാധകമാകും

വസ്തുവിന്റെ ഘടന ഇതാണ്:delay: { "show": 500, "hide": 100 }

html ബൂളിയൻ false പോപോവറിൽ HTML ചേർക്കുക. തെറ്റാണെങ്കിൽ, innerTextDOM-ൽ ഉള്ളടക്കം ചേർക്കാൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കും. 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 വഴി മാത്രം) സ്വീകരിക്കാം. കൂടുതൽ വിവരങ്ങൾക്ക് പോപ്പറിന്റെ ഡിറ്റക്റ്റ്ഓവർഫ്ലോ ഡോക്‌സ് കാണുക .
customClass ചരട് | പ്രവർത്തനം ''

പോപോവർ കാണിക്കുമ്പോൾ അതിലേക്ക് ക്ലാസുകൾ ചേർക്കുക. ടെംപ്ലേറ്റിൽ വ്യക്തമാക്കിയിട്ടുള്ള ഏതെങ്കിലും ക്ലാസുകൾക്ക് പുറമെ ഈ ക്ലാസുകൾ ചേർക്കപ്പെടുമെന്നത് ശ്രദ്ധിക്കുക. ഒന്നിലധികം ക്ലാസുകൾ ചേർക്കാൻ, അവയെ സ്‌പെയ്‌സ് ഉപയോഗിച്ച് വേർതിരിക്കുക: 'class-1 class-2'.

അധിക ക്ലാസ് പേരുകൾ അടങ്ങുന്ന ഒരൊറ്റ സ്ട്രിംഗ് നൽകേണ്ട ഒരു ഫംഗ്‌ഷൻ നിങ്ങൾക്ക് പാസാക്കാനും കഴിയും.

sanitize ബൂളിയൻ true സാനിറ്റൈസേഷൻ പ്രവർത്തനക്ഷമമാക്കുക അല്ലെങ്കിൽ പ്രവർത്തനരഹിതമാക്കുക. സജീവമാക്കിയാൽ 'template', ഓപ്ഷനുകൾ അണുവിമുക്തമാക്കും 'content'. ഞങ്ങളുടെ JavaScript ഡോക്യുമെന്റേഷനിലെ സാനിറ്റൈസർ വിഭാഗം'title' കാണുക .
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()

toggleEnabled

ഒരു മൂലകത്തിന്റെ പോപോവർ കാണിക്കാനോ മറയ്ക്കാനോ ഉള്ള കഴിവ് ടോഗിൾ ചെയ്യുന്നു.

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 പോപോവർ ഉപയോക്താവിന് ദൃശ്യമാകുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (സിഎസ്എസ് സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
hide.bs.popover hideഇൻസ്‌റ്റൻസ് മെത്തേഡ് വിളിച്ചാൽ ഉടൻ തന്നെ ഈ ഇവന്റ് ഫയർ ചെയ്യപ്പെടും.
മറഞ്ഞിരിക്കുന്നു.bs.popover പോപോവർ ഉപയോക്താവിൽ നിന്ന് മറച്ചത് പൂർത്തിയാകുമ്പോൾ ഈ ഇവന്റ് ആരംഭിക്കുന്നു (സിഎസ്എസ് സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
insert.bs.popover show.bs.popoverDOM-ലേക്ക് പോപ്പോവർ ടെംപ്ലേറ്റ് ചേർത്തപ്പോൾ ഇവന്റിന് ശേഷം ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})