முக்கிய உள்ளடக்கத்திற்கு செல்க டாக்ஸ் வழிசெலுத்தலுக்குச் செல்லவும்
in English

Popovers

உங்கள் தளத்தில் உள்ள எந்த உறுப்புக்கும் iOS இல் உள்ளதைப் போன்ற பூட்ஸ்டார்ப் பாப்ஓவர்களைச் சேர்ப்பதற்கான ஆவணங்கள் மற்றும் எடுத்துக்காட்டுகள்.

இந்தப் பக்கத்தில்

கண்ணோட்டம்

பாப்ஓவர் செருகுநிரலைப் பயன்படுத்தும் போது தெரிந்து கொள்ள வேண்டியவை:

  • Popovers 3வது தரப்பு லைப்ரரியான Popper ஐ பொசிஷனிங் செய்ய நம்பியுள்ளது . நீங்கள் bootstrap.js க்கு முன் popper.min.js ஐ சேர்க்க வேண்டும் அல்லது popovers வேலை செய்ய பாப்பரைக் கொண்டிருக்கும் bootstrap.bundle.min.js/ பயன்படுத்தவும்!bootstrap.bundle.js
  • Popovers டூல்டிப் சொருகி ஒரு சார்புநிலையாக தேவைப்படுகிறது.
  • செயல்திறன் காரணங்களுக்காக Popovers தேர்வு செய்யப்படுகின்றன, எனவே அவற்றை நீங்களே துவக்க வேண்டும் .
  • பூஜ்ஜிய நீளம் titleமற்றும் contentமதிப்புகள் ஒருபோதும் பாப்ஓவரைக் காட்டாது.
  • மிகவும் சிக்கலான கூறுகளில் (எங்கள் உள்ளீட்டு குழுக்கள், பொத்தான் குழுக்கள் போன்றவை) ரெண்டரிங் container: 'body'சிக்கல்களைத் தவிர்க்க குறிப்பிடவும்.
  • மறைக்கப்பட்ட கூறுகளில் பாப்ஓவர்களைத் தூண்டுவது வேலை செய்யாது.
  • ஒரு ரேப்பர் உறுப்பில் பாபோவர்ஸ் .disabledஅல்லது disabledஉறுப்புகள் தூண்டப்பட வேண்டும்.
  • பல கோடுகளில் மூடப்பட்டிருக்கும் ஆங்கர்களில் இருந்து தூண்டப்படும் போது, ​​பாப்ஓவர்கள் ஆங்கர்களின் ஒட்டுமொத்த அகலத்திற்கு இடையே மையப்படுத்தப்படும். இந்த நடத்தையைத் தவிர்க்க .text-nowrapஉங்கள் மீது பயன்படுத்தவும் .<a>
  • DOM இலிருந்து தொடர்புடைய உறுப்புகள் அகற்றப்படுவதற்கு முன், Popovers மறைக்கப்பட வேண்டும்.
  • நிழல் DOM இல் உள்ள ஒரு உறுப்புக்கு நன்றி செலுத்துவதன் மூலம் Popovers தூண்டப்படலாம்.
இயல்பாக, இந்தக் கூறு உள்ளமைக்கப்பட்ட உள்ளடக்க சுத்திகரிப்பாளரைப் பயன்படுத்துகிறது, இது வெளிப்படையாக அனுமதிக்கப்படாத எந்த HTML உறுப்புகளையும் அகற்றும். மேலும் விவரங்களுக்கு எங்கள் ஜாவாஸ்கிரிப்ட் ஆவணத்தில் உள்ள சானிடைசர் பகுதியைப் பார்க்கவும் .
இந்தக் கூறுகளின் அனிமேஷன் விளைவு prefers-reduced-motionமீடியா வினவலைச் சார்ந்தது. எங்கள் அணுகல்தன்மை ஆவணத்தின் குறைக்கப்பட்ட இயக்கம் பகுதியைப் பார்க்கவும் .

சில எடுத்துக்காட்டுகளுடன் popovers எவ்வாறு செயல்படுகிறது என்பதைப் பார்க்க தொடர்ந்து படியுங்கள்.

எடுத்துக்காட்டு: எல்லா இடங்களிலும் பாப்ஓவர்களை இயக்கு

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

பயன்பாடு

ஜாவாஸ்கிரிப்ட் வழியாக பாப்ஓவர்களை இயக்கவும்:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

விசைப்பலகை மற்றும் உதவி தொழில்நுட்ப பயனர்களுக்கு popovers வேலை செய்யும்

விசைப்பலகை பயனர்கள் உங்கள் பாப்ஓவர்களைச் செயல்படுத்த அனுமதிக்க, பாரம்பரியமாக கீபோர்டு-ஃபோகஸ் செய்யக்கூடிய மற்றும் ஊடாடும் (இணைப்புகள் அல்லது படிவக் கட்டுப்பாடுகள் போன்றவை) HTML உறுப்புகளில் மட்டுமே அவற்றைச் சேர்க்க வேண்டும். பண்புக்கூறைச் சேர்ப்பதன் மூலம் தன்னிச்சையான HTML உறுப்புகள் ( <span>கள் போன்றவை) கவனம் செலுத்த முடியும் என்றாலும், இது விசைப்பலகை பயனர்களுக்கு ஊடாடாத கூறுகளில் tabindex="0"எரிச்சலூட்டும் மற்றும் குழப்பமான தாவல் நிறுத்தங்களைச் சேர்க்கும், மேலும் பெரும்பாலான உதவித் தொழில்நுட்பங்கள் தற்போது பாப்ஓவரின் உள்ளடக்கத்தை அறிவிக்கவில்லை. . கூடுதலாக, உங்கள் பாப்ஓவர்களுக்கான தூண்டுதலாக மட்டுமே நம்ப வேண்டாம் hover, ஏனெனில் இது விசைப்பலகை பயனர்களைத் தூண்டுவதை சாத்தியமற்றதாக்கும்.

இந்த விருப்பத்தின் மூலம் நீங்கள் பணக்கார, கட்டமைக்கப்பட்ட HTML ஐ பாப்ஓவர்களில் செருக முடியும் என்றாலும், htmlஅதிகப்படியான உள்ளடக்கத்தைச் சேர்ப்பதைத் தவிர்க்குமாறு நாங்கள் கடுமையாக பரிந்துரைக்கிறோம். popovers தற்போது செயல்படும் விதம் என்னவென்றால், ஒருமுறை காட்டப்பட்டால், அவற்றின் உள்ளடக்கம் aria-describedbyபண்புக்கூறுடன் தூண்டுதல் உறுப்புடன் இணைக்கப்பட்டுள்ளது. இதன் விளைவாக, பாப்ஓவரின் முழு உள்ளடக்கமும் ஒரு நீண்ட, தடையற்ற ஸ்ட்ரீமாக உதவி தொழில்நுட்ப பயனர்களுக்கு அறிவிக்கப்படும்.

கூடுதலாக, உங்கள் பாப்ஓவரில் ஊடாடும் கட்டுப்பாடுகளையும் (படிவ உறுப்புகள் அல்லது இணைப்புகள் போன்றவை) சேர்க்க முடியும் (இந்த உறுப்புகளை allowListஅனுமதிக்கப்பட்ட பண்புக்கூறுகள் மற்றும் குறிச்சொற்களில் சேர்ப்பதன் மூலம்), தற்போது பாப்ஓவர் விசைப்பலகை ஃபோகஸ் ஆர்டரை நிர்வகிக்கவில்லை என்பதை அறிந்து கொள்ளுங்கள். விசைப்பலகை பயனர் ஒரு பாப்ஓவரைத் திறக்கும்போது, ​​தூண்டுதல் உறுப்பு மீது கவனம் செலுத்தப்படும், மேலும் ஆவணத்தின் கட்டமைப்பில் உள்ள தூண்டுதலைப் பொதுவாக பாப்ஓவர் உடனடியாகப் பின்பற்றாததால், முன்னோக்கி நகர்கிறது/அழுத்துகிறது என்பதற்கு எந்த உத்தரவாதமும் இல்லை.TABவிசைப்பலகை பயனரை பாப்ஓவரிலேயே நகர்த்தும். சுருக்கமாக, பாப்ஓவரில் ஊடாடும் கட்டுப்பாடுகளைச் சேர்ப்பது, விசைப்பலகை பயனர்களுக்கும் உதவித் தொழில்நுட்பங்களைப் பயன்படுத்துபவர்களுக்கும் இந்தக் கட்டுப்பாடுகளை அணுக முடியாத/பயன்படுத்த முடியாததாக மாற்றும் அல்லது குறைந்தபட்சம் ஒரு நியாயமற்ற ஒட்டுமொத்த ஃபோகஸ் ஆர்டரை உருவாக்கலாம். இந்த சந்தர்ப்பங்களில், அதற்குப் பதிலாக மாதிரி உரையாடலைப் பயன்படுத்தவும்.

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். data-bs-தரவு பண்புக்கூறுகளுக்கு, இல் உள்ளதைப் போல விருப்பப் பெயரைச் சேர்க்கவும் data-bs-animation="". டேட்டா பண்புக்கூறுகள் வழியாக விருப்பங்களை அனுப்பும் போது, ​​விருப்பப் பெயரின் கேஸ் வகையை CamelCase இலிருந்து kebab-case ஆக மாற்றுவதை உறுதிசெய்யவும். உதாரணமாக, பயன்படுத்துவதற்கு பதிலாக 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 ஐச் செருகவும். தவறு எனில் 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 ஆவணத்தைப் பார்க்கவும் .
customClass சரம் | செயல்பாடு ''

பாப்ஓவர் காட்டப்படும்போது வகுப்புகளைச் சேர்க்கவும். டெம்ப்ளேட்டில் குறிப்பிடப்பட்டுள்ள எந்த வகுப்புகளுக்கும் கூடுதலாக இந்த வகுப்புகள் சேர்க்கப்படும் என்பதை நினைவில் கொள்ளவும். பல வகுப்புகளைச் சேர்க்க, அவற்றை இடைவெளிகளுடன் பிரிக்கவும்: 'class-1 class-2'.

கூடுதல் வகுப்புப் பெயர்களைக் கொண்ட ஒற்றை சரத்தை வழங்கும் செயல்பாட்டையும் நீங்கள் அனுப்பலாம்.
sanitize பூலியன் true சுத்தப்படுத்துதலை இயக்கவும் அல்லது முடக்கவும். செயல்படுத்தப்பட்டால் 'template', 'content'மற்றும் '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 முறைகளும் ஒத்திசைவற்றவை மற்றும் மாற்றத்தைத் தொடங்குகின்றன . மாற்றம் தொடங்கப்பட்டவுடன், ஆனால் அது முடிவதற்குள் அவர்கள் அழைப்பாளரிடம் திரும்புகிறார்கள் . கூடுதலாக, மாற்றும் கூறுகளின் முறை அழைப்பு புறக்கணிக்கப்படும் .

மேலும் தகவலுக்கு எங்கள் ஜாவாஸ்கிரிப்ட் ஆவணங்களைப் பார்க்கவும் .

நிகழ்ச்சி

ஒரு தனிமத்தின் பாப்ஓவரை வெளிப்படுத்துகிறது. பாப்ஓவர் உண்மையில் காட்டப்படுவதற்கு முன்பு (அதாவது shown.bs.popoverநிகழ்வு நிகழும் முன்) அழைப்பாளருக்குத் திரும்புகிறது. இது பாப்ஓவரின் "கையேடு" தூண்டுதலாகக் கருதப்படுகிறது. தலைப்பு மற்றும் உள்ளடக்கம் பூஜ்ஜிய நீளம் கொண்ட Popovers ஒருபோதும் காட்டப்படாது.

myPopover.show()

மறைக்க

ஒரு தனிமத்தின் பாப்ஓவரை மறைக்கிறது. பாப்ஓவர் உண்மையில் மறைக்கப்படுவதற்கு முன்பு (அதாவது hidden.bs.popoverநிகழ்வு நிகழும் முன்) அழைப்பாளருக்குத் திரும்புகிறது. இது பாப்ஓவரின் "கையேடு" தூண்டுதலாகக் கருதப்படுகிறது.

myPopover.hide()

மாற்று

ஒரு உறுப்பின் பாப்ஓவரை மாற்றுகிறது. பாப்ஓவர் உண்மையில் காட்டப்படுவதற்கு அல்லது மறைக்கப்படுவதற்கு முன்பு (அதாவது நிகழ்வு shown.bs.popoverஅல்லது hidden.bs.popoverநிகழ்வு நிகழும் முன்) அழைப்பாளருக்குத் திரும்புகிறது. இது பாப்ஓவரின் "கையேடு" தூண்டுதலாகக் கருதப்படுகிறது.

myPopover.toggle()

அப்புறப்படுத்து

ஒரு தனிமத்தின் பாப்ஓவரை மறைத்து அழிக்கிறது (DOM உறுப்பில் சேமிக்கப்பட்ட தரவை நீக்குகிறது). பிரதிநிதித்துவத்தைப் பயன்படுத்தும் Popovers ( selectorவிருப்பத்தைப் பயன்படுத்தி உருவாக்கப்பட்டவை ) சந்ததி தூண்டுதல் கூறுகளில் தனித்தனியாக அழிக்கப்பட முடியாது.

myPopover.dispose()

செயல்படுத்த

ஒரு தனிமத்தின் பாப்ஓவர் காட்டப்படும் திறனை வழங்குகிறது. Popovers இயல்பாகவே இயக்கப்படும்.

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 பாப்ஓவர் பயனருக்குத் தெரியும் போது இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
hide.bs.popover hideநிகழ்வு முறை அழைக்கப்பட்டவுடன் இந்த நிகழ்வு உடனடியாக நீக்கப்படும் .
மறைக்கப்பட்ட.bs.popover பாப்ஓவர் பயனரிடமிருந்து மறைக்கப்பட்டு முடிந்ததும் இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
செருகப்பட்டது.bs.popover show.bs.popoverDOM இல் பாப்ஓவர் டெம்ப்ளேட் சேர்க்கப்படும் போது, ​​நிகழ்வுக்குப் பிறகு இந்த நிகழ்வு நீக்கப்படும் . 
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})