പോപോവറുകൾ

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

അവലോകനം

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

Popovers സ്ഥാനനിർണ്ണയത്തിനായി മൂന്നാം കക്ഷി ലൈബ്രറി Popper.js- നെ ആശ്രയിക്കുന്നു . bootstrap.js-ന് മുമ്പ് നിങ്ങൾ popper.min.js ഉൾപ്പെടുത്തണം അല്ലെങ്കിൽ പോപ്പവർ പ്രവർത്തിക്കുന്നതിന് Popper.js അടങ്ങിയിരിക്കുന്ന bootstrap.bundle.min.js/ ഉപയോഗിക്കുക!bootstrap.bundle.js
Popovers ഒരു ഡിപൻഡൻസിയായി ടൂൾടിപ്പ് പ്ലഗിൻ ആവശ്യമാണ്.
ഉറവിടത്തിൽ നിന്നാണ് നിങ്ങൾ ഞങ്ങളുടെ JavaScript നിർമ്മിക്കുന്നതെങ്കിൽ, അത് ആവശ്യമാണ്util.js .
പ്രകടന കാരണങ്ങളാൽ പോപോവറുകൾ ഓപ്റ്റ്-ഇൻ ചെയ്യുന്നു, അതിനാൽ നിങ്ങൾ അവ സ്വയം ആരംഭിക്കണം .
പൂജ്യം നീളവും titleമൂല്യങ്ങളും contentഒരിക്കലും പോപോവർ കാണിക്കില്ല.
container: 'body'കൂടുതൽ സങ്കീർണ്ണമായ ഘടകങ്ങളിൽ (ഞങ്ങളുടെ ഇൻപുട്ട് ഗ്രൂപ്പുകൾ, ബട്ടൺ ഗ്രൂപ്പുകൾ മുതലായവ) റെൻഡറിംഗ് പ്രശ്നങ്ങൾ ഒഴിവാക്കാൻ വ്യക്തമാക്കുക .
മറഞ്ഞിരിക്കുന്ന ഘടകങ്ങളിൽ പോപോവറുകൾ ട്രിഗർ ചെയ്യുന്നത് പ്രവർത്തിക്കില്ല.
ഒരു റാപ്പർ എലമെന്റിൽ പോപ്പോവറുകൾ .disabledഅല്ലെങ്കിൽ disabledഘടകങ്ങൾ ട്രിഗർ ചെയ്യണം.
ഒന്നിലധികം ലൈനുകളിൽ പൊതിഞ്ഞിരിക്കുന്ന ആങ്കറുകളിൽ നിന്ന് ട്രിഗർ ചെയ്യുമ്പോൾ, ആങ്കറുകളുടെ മൊത്തത്തിലുള്ള വീതിയ്ക്കിടയിൽ പോപോവറുകൾ കേന്ദ്രീകരിക്കും. ഈ സ്വഭാവം ഒഴിവാക്കാൻ .text-nowrapനിങ്ങളുടെ s-ൽ ഉപയോഗിക്കുക .<a>
DOM-ൽ നിന്ന് അവയുടെ അനുബന്ധ ഘടകങ്ങൾ നീക്കംചെയ്യുന്നതിന് മുമ്പ് പോപോവറുകൾ മറച്ചിരിക്കണം.

ചില ഉദാഹരണങ്ങൾക്കൊപ്പം പോപോവറുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് കാണാൻ വായന തുടരുക.

ഉദാഹരണം: എല്ലായിടത്തും പോപോവറുകൾ പ്രവർത്തനക്ഷമമാക്കുക

ഒരു പേജിലെ എല്ലാ പോപോവറുകളും ആരംഭിക്കുന്നതിനുള്ള ഒരു മാർഗ്ഗം അവയുടെ data-toggleആട്രിബ്യൂട്ട് അനുസരിച്ച് അവയെ തിരഞ്ഞെടുക്കുന്നതാണ്:

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

ഉദാഹരണം: `container`ഓപ്ഷൻ ഉപയോഗിക്കുന്നു

ഒരു പാരന്റ് എലമെന്റിൽ നിങ്ങൾക്ക് ഒരു പോപോവറിനെ തടസ്സപ്പെടുത്തുന്ന ചില ശൈലികൾ ഉണ്ടെങ്കിൽ, നിങ്ങൾ ഒരു ഇഷ്‌ടാനുസൃതം വ്യക്തമാക്കാൻ ആഗ്രഹിക്കും, containerഅതുവഴി പോപോവറിന്റെ HTML ആ ഘടകത്തിനുള്ളിൽ ദൃശ്യമാകും.

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

ഉദാഹരണം

<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>

നാല് ദിശകൾ

നാല് ഓപ്ഷനുകൾ ലഭ്യമാണ്: മുകളിൽ, വലത്, താഴെ, ഇടത് അലൈൻ ചെയ്‌തിരിക്കുന്നു.

<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>

അടുത്ത ക്ലിക്കിൽ ഡിസ്മിസ് ചെയ്യുക

focusടോഗിൾ എലമെന്റിൽ നിന്ന് വ്യത്യസ്തമായ ഒരു ഘടകത്തിന്റെ ഉപയോക്താവിന്റെ അടുത്ത ക്ലിക്കിൽ പോപോവറുകൾ ഡിസ്മിസ് ചെയ്യാൻ ട്രിഗർ ഉപയോഗിക്കുക .

ഡിസ്മിസ്-ഓൺ-അടുത്ത-ക്ലിക്കിന് പ്രത്യേക മാർക്ക്അപ്പ് ആവശ്യമാണ്

ശരിയായ ക്രോസ്-ബ്രൗസറിനും ക്രോസ്-പ്ലാറ്റ്ഫോം പെരുമാറ്റത്തിനും, നിങ്ങൾ ടാഗ് ഉപയോഗിക്കണം, <a>ടാഗ് അല്ല , <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'
})

പ്രവർത്തനരഹിതമാക്കിയ ഘടകങ്ങൾ

ആട്രിബ്യൂട്ട് ഉള്ള ഘടകങ്ങൾ disabledസംവേദനാത്മകമല്ല, അതായത് പോപോവർ (അല്ലെങ്കിൽ ടൂൾടിപ്പ്) പ്രവർത്തനക്ഷമമാക്കാൻ ഉപയോക്താക്കൾക്ക് ഹോവർ ചെയ്യാനോ ക്ലിക്ക് ചെയ്യാനോ കഴിയില്ല. ഒരു പരിഹാരമെന്ന നിലയിൽ, ഒരു റാപ്പറിൽ നിന്ന് പോപോവർ പ്രവർത്തനക്ഷമമാക്കാനോ <div>അല്ലെങ്കിൽ പ്രവർത്തനരഹിതമാക്കിയ ഘടകത്തെ <span>അസാധുവാക്കാനോ നിങ്ങൾ ആഗ്രഹിക്കും.pointer-events

അപ്രാപ്തമാക്കിയ പോപോവർ ട്രിഗറുകൾക്കായി, നിങ്ങളുടെ ഉപയോക്താക്കൾ ഒരു അപ്രാപ്തമാക്കിയ ഘടകത്തിൽ ക്ലിക്ക്data-trigger="hover" ചെയ്യുമെന്ന് പ്രതീക്ഷിക്കാത്തതിനാൽ അവർക്ക് ഉടനടി ദൃശ്യ ഫീഡ്‌ബാക്ക് ആയി പോപോവർ ദൃശ്യമാകുന്നതിനും നിങ്ങൾ മുൻഗണന നൽകാം.

<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>

ഉപയോഗം

JavaScript വഴി പോപോവറുകൾ പ്രവർത്തനക്ഷമമാക്കുക:

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

ഓപ്ഷനുകൾ

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ അല്ലെങ്കിൽ JavaScript വഴി ഓപ്ഷനുകൾ കൈമാറാൻ കഴിയും. ഡാറ്റ ആട്രിബ്യൂട്ടുകൾക്കായി, എന്നതിലേക്ക് ഓപ്ഷന്റെ പേര് ചേർക്കുക data-.data-animation=""

പേര്	ടൈപ്പ് ചെയ്യുക	സ്ഥിരസ്ഥിതി	വിവരണം
ആനിമേഷൻ	ബൂളിയൻ	സത്യം	പോപ്പോവറിലേക്ക് ഒരു CSS ഫേഡ് ട്രാൻസിഷൻ പ്രയോഗിക്കുക
കണ്ടെയ്നർ	ചരട് \| മൂലകം \| തെറ്റായ	തെറ്റായ	ഒരു നിർദ്ദിഷ്ട ഘടകത്തിലേക്ക് പോപോവർ കൂട്ടിച്ചേർക്കുന്നു. ഉദാഹരണം: `container: 'body'`. ട്രിഗറിംഗ് എലമെന്റിന് സമീപം ഡോക്യുമെന്റിന്റെ ഒഴുക്കിൽ പോപോവർ സ്ഥാപിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നതിനാൽ ഈ ഓപ്ഷൻ പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ് - ഇത് വിൻഡോ വലുപ്പം മാറ്റുമ്പോൾ ട്രിഗറിംഗ് എലമെന്റിൽ നിന്ന് പൊപ്പോവറിനെ തടയും.
ഉള്ളടക്കം	ചരട് \| മൂലകം \| പ്രവർത്തനം	''	`data-content`ആട്രിബ്യൂട്ട് ഇല്ലെങ്കിൽ ഡിഫോൾട്ട് ഉള്ളടക്ക മൂല്യം . ഒരു ഫംഗ്‌ഷൻ നൽകിയാൽ, `this`പോപ്പോവർ ഘടിപ്പിച്ചിരിക്കുന്ന ഘടകത്തിലേക്ക് അതിന്റെ റഫറൻസ് സജ്ജീകരിച്ച് അതിനെ വിളിക്കും.
കാലതാമസം	നമ്പർ \| വസ്തു	0	പോപ്പോവർ (മി.എസ്) കാണിക്കുന്നതിനും മറയ്ക്കുന്നതിനും കാലതാമസം - മാനുവൽ ട്രിഗർ തരത്തിന് ബാധകമല്ല ഒരു നമ്പർ നൽകിയിട്ടുണ്ടെങ്കിൽ, മറയ്ക്കുക/കാണിക്കുക എന്നിവയ്‌ക്ക് കാലതാമസം ബാധകമാകും വസ്തുവിന്റെ ഘടന ഇതാണ്:`delay: { "show": 500, "hide": 100 }`
html	ബൂളിയൻ	തെറ്റായ	പോപോവറിൽ HTML ചേർക്കുക. തെറ്റാണെങ്കിൽ, `text`DOM-ൽ ഉള്ളടക്കം ചേർക്കാൻ jQuery-യുടെ രീതി ഉപയോഗിക്കും. XSS ആക്രമണങ്ങളെക്കുറിച്ച് നിങ്ങൾക്ക് ആശങ്കയുണ്ടെങ്കിൽ ടെക്സ്റ്റ് ഉപയോഗിക്കുക.
പ്ലേസ്മെന്റ്	ചരട് \| പ്രവർത്തനം	'ശരി'	പോപോവർ എങ്ങനെ സ്ഥാപിക്കാം - ഓട്ടോ \| മുകളിൽ \| താഴെ \| വിട്ടു \| ശരിയാണ്. വ്യക്തമാക്കുമ്പോൾ, അത് `auto`പോപ്പോവറിനെ ചലനാത്മകമായി പുനഃക്രമീകരിക്കും. പ്ലെയ്‌സ്‌മെന്റ് നിർണ്ണയിക്കാൻ ഒരു ഫംഗ്‌ഷൻ ഉപയോഗിക്കുമ്പോൾ, അതിനെ പോപ്പോവർ DOM നോഡ് അതിന്റെ ആദ്യ ആർഗ്യുമെന്റായും ട്രിഗറിംഗ് എലമെന്റ് DOM നോഡ് അതിന്റെ രണ്ടാമത്തേയും ആയി വിളിക്കുന്നു. സന്ദർഭം പോപോവർ `this`സംഭവത്തിലേക്ക് സജ്ജീകരിച്ചിരിക്കുന്നു.
സെലക്ടർ	ചരട് \| തെറ്റായ	തെറ്റായ	ഒരു സെലക്ടർ നൽകിയിട്ടുണ്ടെങ്കിൽ, നിർദ്ദിഷ്ട ടാർഗെറ്റുകളിലേക്ക് പോപ്പോവർ ഒബ്‌ജക്റ്റുകൾ ഡെലിഗേറ്റ് ചെയ്യപ്പെടും. പ്രായോഗികമായി, പോപ്പോവറുകൾ ചേർക്കുന്നതിന് ഡൈനാമിക് HTML ഉള്ളടക്കം പ്രവർത്തനക്ഷമമാക്കാൻ ഇത് ഉപയോഗിക്കുന്നു. ഇതും വിജ്ഞാനപ്രദമായ ഒരു ഉദാഹരണവും കാണുക .
ടെംപ്ലേറ്റ്	സ്ട്രിംഗ്	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	പോപ്പോവർ സൃഷ്ടിക്കുമ്പോൾ ഉപയോഗിക്കേണ്ട അടിസ്ഥാന HTML. പോപ്പോവറുകൾ `title`എന്നതിലേക്ക് കുത്തിവയ്ക്കും `.popover-header`. പോപ്പോവറുകൾ `content`എന്നതിലേക്ക് കുത്തിവയ്ക്കും `.popover-body`. `.arrow`പോപോവറിന്റെ അസ്ത്രമായി മാറും. ഏറ്റവും പുറത്തെ റാപ്പർ ഘടകത്തിന് `.popover`ക്ലാസ് ഉണ്ടായിരിക്കണം.
തലക്കെട്ട്	ചരട് \| മൂലകം \| പ്രവർത്തനം	''	`title`ആട്രിബ്യൂട്ട് ഇല്ലെങ്കിൽ ഡിഫോൾട്ട് ശീർഷക മൂല്യം . ഒരു ഫംഗ്‌ഷൻ നൽകിയാൽ, `this`പോപ്പോവർ ഘടിപ്പിച്ചിരിക്കുന്ന ഘടകത്തിലേക്ക് അതിന്റെ റഫറൻസ് സജ്ജീകരിച്ച് അതിനെ വിളിക്കും.
ട്രിഗർ	സ്ട്രിംഗ്	'ക്ലിക്ക്'	പോപോവർ എങ്ങനെയാണ് ട്രിഗർ ചെയ്യുന്നത് - ക്ലിക്ക് \| ഹോവർ \| ഫോക്കസ് \| മാനുവൽ. നിങ്ങൾക്ക് ഒന്നിലധികം ട്രിഗറുകൾ കടന്നുപോകാം; ഒരു സ്പേസ് ഉപയോഗിച്ച് അവയെ വേർതിരിക്കുക. `manual`മറ്റേതെങ്കിലും ട്രിഗറുമായി സംയോജിപ്പിക്കാൻ കഴിയില്ല.
ഓഫ്സെറ്റ്	നമ്പർ \| സ്ട്രിംഗ്	0	പോപോവറിന്റെ ലക്ഷ്യവുമായി ബന്ധപ്പെട്ട ഓഫ്സെറ്റ്. കൂടുതൽ വിവരങ്ങൾക്ക് Popper.js-ന്റെ ഓഫ്‌സെറ്റ് ഡോക്‌സ് കാണുക .
ഫാൾബാക്ക് പ്ലേസ്മെന്റ്	ചരട് \| അറേ	'ഫ്ലിപ്പ്'	ഫാൾബാക്കിൽ പോപ്പർ ഏത് സ്ഥാനമാണ് ഉപയോഗിക്കേണ്ടതെന്ന് വ്യക്തമാക്കാൻ അനുവദിക്കുക. കൂടുതൽ വിവരങ്ങൾക്ക് Popper.js-ന്റെ പെരുമാറ്റ ഡോക്‌സ് കാണുക
അതിർത്തി	ചരട് \| ഘടകം	'സ്ക്രോൾ പേരന്റ്'	പോപോവറിന്റെ ഓവർഫ്ലോ കൺസ്ട്രെയിന്റ് ബൗണ്ടറി. `'viewport'`, `'window'`, `'scrollParent'`, അല്ലെങ്കിൽ ഒരു HTMLElement റഫറൻസ് (JavaScript മാത്രം) മൂല്യങ്ങൾ സ്വീകരിക്കുന്നു . കൂടുതൽ വിവരങ്ങൾക്ക്, Popper.js-ന്റെ പ്രിവൻറോ ഓവർഫ്ലോ ഡോക്‌സ് കാണുക .

വ്യക്തിഗത പോപോവറുകൾക്കുള്ള ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ

മുകളിൽ വിശദീകരിച്ചത് പോലെ, വ്യക്തിഗത പോപ്പോവറുകൾക്കുള്ള ഓപ്ഷനുകൾ ഡാറ്റ ആട്രിബ്യൂട്ടുകളുടെ ഉപയോഗത്തിലൂടെ പകരമായി വ്യക്തമാക്കാം.

രീതികൾ

അസിൻക്രണസ് രീതികളും പരിവർത്തനങ്ങളും

എല്ലാ API രീതികളും അസമന്വിതവും ഒരു പരിവർത്തനം ആരംഭിക്കുന്നതുമാണ് . പരിവർത്തനം ആരംഭിച്ചയുടൻ അവർ വിളിക്കുന്ന ആളിലേക്ക് മടങ്ങുന്നു, പക്ഷേ അത് അവസാനിക്കുന്നതിന് മുമ്പ് . കൂടാതെ, ഒരു സംക്രമണ ഘടകത്തിലെ ഒരു മെത്തേഡ് കോൾ അവഗണിക്കപ്പെടും .

കൂടുതൽ വിവരങ്ങൾക്ക് ഞങ്ങളുടെ JavaScript ഡോക്യുമെന്റേഷൻ കാണുക.

`$().popover(options)`

ഒരു മൂലക ശേഖരണത്തിനായി പോപോവറുകൾ ആരംഭിക്കുന്നു.

`.popover('show')`

ഒരു മൂലകത്തിന്റെ പോപോവർ വെളിപ്പെടുത്തുന്നു. പോപോവർ യഥാർത്ഥത്തിൽ കാണിക്കുന്നതിന് മുമ്പ് (അതായത് shown.bs.popoverഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) വിളിക്കുന്നയാളിലേക്ക് മടങ്ങുന്നു. ഇത് പോപോവറിന്റെ "മാനുവൽ" ട്രിഗറിംഗ് ആയി കണക്കാക്കപ്പെടുന്നു. ശീർഷകവും ഉള്ളടക്കവും പൂജ്യം നീളമുള്ള പോപോവറുകൾ ഒരിക്കലും പ്രദർശിപ്പിക്കില്ല.

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

`.popover('hide')`

ഒരു മൂലകത്തിന്റെ പോപോവർ മറയ്ക്കുന്നു. പോപോവർ യഥാർത്ഥത്തിൽ മറയ്ക്കുന്നതിന് മുമ്പ് (അതായത് hidden.bs.popoverഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) വിളിക്കുന്നയാളിലേക്ക് മടങ്ങുന്നു. ഇത് പോപോവറിന്റെ "മാനുവൽ" ട്രിഗറിംഗ് ആയി കണക്കാക്കപ്പെടുന്നു.

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

`.popover('toggle')`

ഒരു മൂലകത്തിന്റെ പോപോവർ ടോഗിൾ ചെയ്യുന്നു. പോപോവർ യഥാർത്ഥത്തിൽ കാണിക്കുകയോ മറയ്ക്കുകയോ ചെയ്യുന്നതിനുമുമ്പ് (അതായത് shown.bs.popoverഅല്ലെങ്കിൽ hidden.bs.popoverഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) വിളിക്കുന്നയാളിലേക്ക് മടങ്ങുന്നു. ഇത് പോപോവറിന്റെ "മാനുവൽ" ട്രിഗറിംഗ് ആയി കണക്കാക്കപ്പെടുന്നു.

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

`.popover('dispose')`

ഒരു മൂലകത്തിന്റെ പോപോവർ മറയ്ക്കുകയും നശിപ്പിക്കുകയും ചെയ്യുന്നു. ഡെലിഗേഷൻ ഉപയോഗിക്കുന്ന പോപോവറുകൾ ( ഓപ്‌ഷൻ ഉപയോഗിച്ച് സൃഷ്‌ടിച്ചവ )selector ഡിസെൻഡന്റ് ട്രിഗർ ഘടകങ്ങളിൽ വ്യക്തിഗതമായി നശിപ്പിക്കാൻ കഴിയില്ല.

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

`.popover('enable')`

ഒരു മൂലകത്തിന്റെ പോപ്പോവറിന് കാണിക്കാനുള്ള കഴിവ് നൽകുന്നു. പോപോവറുകൾ ഡിഫോൾട്ടായി പ്രവർത്തനക്ഷമമാക്കിയിരിക്കുന്നു.

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

`.popover('disable')`

ഒരു മൂലകത്തിന്റെ പോപോവർ കാണിക്കാനുള്ള കഴിവ് നീക്കം ചെയ്യുന്നു. വീണ്ടും പ്രവർത്തനക്ഷമമാക്കിയാൽ മാത്രമേ പോപ്പോവർ കാണിക്കാൻ കഴിയൂ.

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

`.popover('toggleEnabled')`

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

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

`.popover('update')`

ഒരു മൂലകത്തിന്റെ പോപോവറിന്റെ സ്ഥാനം അപ്ഡേറ്റ് ചെയ്യുന്നു.

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

ഇവന്റുകൾ

ഇവന്റ് തരം	വിവരണം
show.bs.popover	`show`ഇൻസ്‌റ്റൻസ് മെത്തേഡ് എന്ന് വിളിക്കുമ്പോൾ ഈ സംഭവം ഉടനടി തീപിടിക്കുന്നു .
കാണിച്ചിരിക്കുന്നു.bs.popover	പോപോവർ ഉപയോക്താവിന് ദൃശ്യമാകുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (സിഎസ്എസ് സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
hide.bs.popover	`hide`ഇൻസ്‌റ്റൻസ് മെത്തേഡ് വിളിച്ചാൽ ഉടൻ തന്നെ ഈ ഇവന്റ് ഫയർ ചെയ്യപ്പെടും.
മറഞ്ഞിരിക്കുന്നു.bs.popover	പോപോവർ ഉപയോക്താവിൽ നിന്ന് മറച്ചത് പൂർത്തിയാകുമ്പോൾ ഈ ഇവന്റ് ആരംഭിക്കുന്നു (സിഎസ്എസ് സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
insert.bs.popover	`show.bs.popover`DOM-ലേക്ക് പോപോവർ ടെംപ്ലേറ്റ് ചേർത്തപ്പോൾ ഇവന്റിന് ശേഷം ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും.

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})