Popovers

అవలోకనం

పాప్‌ఓవర్ ప్లగ్‌ఇన్‌ని ఉపయోగిస్తున్నప్పుడు తెలుసుకోవలసిన విషయాలు:

• Popovers స్థానాల కోసం మూడవ పార్టీ లైబ్రరీ Popper పై ఆధారపడతాయి . మీరు తప్పనిసరిగా ముందు popper.min.jsbootstrap.js ని చేర్చాలి లేదా పాప్పర్‌ని bootstrap.bundle.min.jsకలిగి ఉన్న దానిని ఉపయోగించాలి.
• Popovers డిపెండెన్సీగా popover ప్లగ్ఇన్ అవసరం.
• పనితీరు కారణాల దృష్ట్యా Popovers ఎంపిక చేయబడ్డాయి, కాబట్టి మీరు వాటిని మీరే ప్రారంభించాలి .
• జీరో-లెంగ్త్ titleమరియు contentవిలువలు ఎప్పటికీ పాప్‌ఓవర్‌ను చూపించవు.
• container: 'body'మరింత సంక్లిష్టమైన భాగాలలో (మా ఇన్‌పుట్ సమూహాలు, బటన్ సమూహాలు మొదలైనవి) రెండరింగ్ సమస్యలను నివారించడానికి పేర్కొనండి .
• దాచిన మూలకాలపై పాపోవర్‌లను ప్రేరేపించడం పని చేయదు.
• ర్యాపర్ ఎలిమెంట్‌పై పాపోవర్‌లు .disabledలేదా disabledఎలిమెంట్స్ తప్పనిసరిగా ట్రిగ్గర్ చేయబడాలి.
• బహుళ పంక్తులలో చుట్టబడిన యాంకర్‌ల నుండి ప్రేరేపించబడినప్పుడు, యాంకర్‌ల మొత్తం వెడల్పు మధ్య పాపోవర్‌లు కేంద్రీకృతమై ఉంటాయి. ఈ ప్రవర్తనను నివారించడానికి .text-nowrapమీ sలో ఉపయోగించండి .<a>
• DOM నుండి సంబంధిత మూలకాలను తీసివేయడానికి ముందు Popovers తప్పనిసరిగా దాచబడాలి.
• షాడో DOM లోపల ఉన్న మూలకం కారణంగా పాపోవర్‌లు ప్రేరేపించబడతాయి.

కొన్ని ఉదాహరణలతో పాపోవర్‌లు ఎలా పని చేస్తాయో చూడటానికి చదువుతూ ఉండండి.

ఉదాహరణలు

పాప్‌ఓవర్‌లను ప్రారంభించండి

పైన పేర్కొన్న విధంగా, మీరు వాటిని ఉపయోగించే ముందు తప్పనిసరిగా పాపోవర్‌లను ప్రారంభించాలి. పేజీలోని అన్ని పాప్‌ఓవర్‌లను ప్రారంభించేందుకు ఒక మార్గం ఏమిటంటే, వాటిని వాటి data-bs-toggleలక్షణం ద్వారా ఎంచుకోవడం.

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

ప్రత్యక్ష ప్రదర్శన

మేము క్రింది లైవ్ పాప్‌ఓవర్‌ని రెండర్ చేయడానికి పై స్నిప్పెట్‌ని పోలి ఉన్న జావాస్క్రిప్ట్‌ని ఉపయోగిస్తాము. శీర్షికలు ద్వారా సెట్ చేయబడ్డాయి data-bs-titleమరియు శరీర కంటెంట్ ద్వారా సెట్ చేయబడింది data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

నాలుగు దిక్కులు

నాలుగు ఎంపికలు అందుబాటులో ఉన్నాయి: ఎగువ, కుడి, దిగువ మరియు ఎడమ. RTLలో బూట్‌స్ట్రాప్‌ని ఉపయోగిస్తున్నప్పుడు దిశలు ప్రతిబింబించబడతాయి. data-bs-placementదిశను మార్చడానికి సెట్ చేయండి .

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

కస్టమ్container

మీరు పాప్‌ఓవర్‌కు ఆటంకం కలిగించే పేరెంట్ ఎలిమెంట్‌లో కొన్ని స్టైల్‌లను కలిగి ఉన్నప్పుడు, మీరు కస్టమ్‌ను పేర్కొనాలి, containerతద్వారా ఆ ఎలిమెంట్‌లో పాప్‌ఓవర్ యొక్క HTML కనిపిస్తుంది. ప్రతిస్పందించే పట్టికలు, ఇన్‌పుట్ సమూహాలు మరియు ఇలాంటి వాటిలో ఇది సాధారణం.

const popover = new bootstrap.Popover('.example-popover', {
  container: 'body'
})

పాప్‌ఓవర్ మోడల్‌కి జోడించబడిందని నిర్ధారించుకోవడానికి, మోడల్ డైలాగ్‌లోనిcontainer పాపోవర్‌లు మీరు స్పష్టమైన కస్టమ్‌ని సెట్ చేయాలనుకుంటున్న మరొక పరిస్థితి . ఇంటరాక్టివ్ ఎలిమెంట్‌లను కలిగి ఉన్న పాప్‌ఓవర్‌లకు ఇది చాలా ముఖ్యమైనది - మోడల్ డైలాగ్‌లు ఫోకస్‌ను ట్రాప్ చేస్తాయి, కాబట్టి పాప్‌ఓవర్ మోడల్ యొక్క చైల్డ్ ఎలిమెంట్ అయితే తప్ప, వినియోగదారులు ఈ ఇంటరాక్టివ్ ఎలిమెంట్‌లను ఫోకస్ చేయలేరు లేదా యాక్టివేట్ చేయలేరు.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

కస్టమ్ popovers

మీరు CSS వేరియబుల్స్ ఉపయోగించి popovers రూపాన్ని అనుకూలీకరించవచ్చు . data-bs-custom-class="custom-popover"మేము మా అనుకూల రూపాన్ని స్కోప్ చేయడానికి అనుకూల తరగతిని సెట్ చేసాము మరియు కొన్ని స్థానిక CSS వేరియబుల్‌లను భర్తీ చేయడానికి దాన్ని ఉపయోగిస్తాము.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

తదుపరి క్లిక్‌లో తీసివేయండి

focusటోగుల్ ఎలిమెంట్ కాకుండా వేరొక మూలకం యొక్క వినియోగదారు తదుపరి క్లిక్‌లో పాప్‌ఓవర్‌లను తీసివేయడానికి ట్రిగ్గర్‌ను ఉపయోగించండి .

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.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>

CSS

వేరియబుల్స్

బూట్‌స్ట్రాప్ యొక్క అభివృద్ధి చెందుతున్న CSS వేరియబుల్స్ విధానంలో భాగంగా, popovers ఇప్పుడు .popoverమెరుగుపరచబడిన నిజ-సమయ అనుకూలీకరణ కోసం స్థానిక CSS వేరియబుల్‌లను ఉపయోగిస్తుంది. CSS వేరియబుల్స్ కోసం విలువలు Sass ద్వారా సెట్ చేయబడతాయి, కాబట్టి Sass అనుకూలీకరణకు ఇప్పటికీ మద్దతు ఉంది.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

సాస్ వేరియబుల్స్

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

వాడుక

జావాస్క్రిప్ట్ ద్వారా పాపవర్‌లను ప్రారంభించండి:

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

ఎంపికలు

ఎంపికలు డేటా అట్రిబ్యూట్‌లు లేదా జావాస్క్రిప్ట్ ద్వారా పాస్ చేయగలవు కాబట్టి, మీరు ఎంపిక పేరును data-bs-, లో వలె జోడించవచ్చు data-bs-animation="{value}". డేటా అట్రిబ్యూట్‌ల ద్వారా ఆప్షన్‌లను పాస్ చేస్తున్నప్పుడు ఎంపిక పేరు యొక్క కేస్ రకాన్ని “ కామెల్‌కేస్ ” నుండి “ కబాబ్-కేస్ ”కి మార్చాలని నిర్ధారించుకోండి. ఉదాహరణకు, data-bs-custom-class="beautifier"బదులుగా ఉపయోగించండి data-bs-customClass="beautifier".

బూట్‌స్ట్రాప్ 5.2.0 నాటికి, అన్ని భాగాలు JSON స్ట్రింగ్‌గా సాధారణ కాంపోనెంట్ కాన్ఫిగరేషన్‌ను కలిగి ఉండే ప్రయోగాత్మక రిజర్వు చేయబడిన డేటా లక్షణానికి మద్దతు ఇస్తాయి. data-bs-configమూలకం కలిగి ఉన్నప్పుడు data-bs-config='{"delay":0, "title":123}'మరియు data-bs-title="456"లక్షణాలను కలిగి ఉన్నప్పుడు, తుది titleవిలువ ఉంటుంది 456మరియు ప్రత్యేక డేటా లక్షణాలు న ఇచ్చిన విలువలను భర్తీ చేస్తాయి data-bs-config. అదనంగా, ఇప్పటికే ఉన్న డేటా అట్రిబ్యూట్‌లు వంటి JSON విలువలను కలిగి ఉంటాయి data-bs-delay='{"show":0,"hide":150}'.

దీనితో ఫంక్షన్‌ని ఉపయోగించడంpopperConfig

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

పద్ధతులు

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

ఈవెంట్స్

const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // do something...
})