Popovers

అవలోకనం

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

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

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

ఉదాహరణ: ప్రతిచోటా పాపవర్‌లను ప్రారంభించండి

పేజీలోని అన్ని పాప్‌ఓవర్‌లను ప్రారంభించేందుకు ఒక మార్గం ఏమిటంటే, వాటిని వాటి 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 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)

ఎంపికలు

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

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

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

పద్ధతులు

చూపించు

మూలకం యొక్క పాప్‌ఓవర్‌ను వెల్లడిస్తుంది. పాప్‌ఓవర్ వాస్తవంగా చూపబడక ముందే (అంటే shown.bs.popoverఈవెంట్ జరగడానికి ముందు) కాలర్‌కి తిరిగి వస్తుంది. ఇది పాప్‌ఓవర్ యొక్క "మాన్యువల్" ట్రిగ్గర్‌గా పరిగణించబడుతుంది. టైటిల్ మరియు కంటెంట్ రెండూ సున్నా-పొడవు ఉన్న పాపవర్‌లు ఎప్పుడూ ప్రదర్శించబడవు.

myPopover.show()

దాచు

మూలకం యొక్క పాప్‌ఓవర్‌ను దాచిపెడుతుంది. పాప్‌ఓవర్ వాస్తవంగా దాచబడక ముందే (అంటే hidden.bs.popoverఈవెంట్ జరగడానికి ముందు) కాలర్‌కి తిరిగి వస్తుంది. ఇది పాప్‌ఓవర్ యొక్క "మాన్యువల్" ట్రిగ్గర్‌గా పరిగణించబడుతుంది.

myPopover.hide()

టోగుల్

మూలకం యొక్క పాప్‌ఓవర్‌ను టోగుల్ చేస్తుంది. పాప్‌ఓవర్ వాస్తవంగా చూపబడటానికి లేదా దాచబడటానికి ముందు కాలర్‌కి తిరిగి వస్తుంది (అంటే shown.bs.popoverలేదా hidden.bs.popoverసంఘటన జరగడానికి ముందు). ఇది పాప్‌ఓవర్ యొక్క "మాన్యువల్" ట్రిగ్గర్‌గా పరిగణించబడుతుంది.

myPopover.toggle()

పారవేయండి

మూలకం యొక్క పాప్‌ఓవర్‌ను దాచి, నాశనం చేస్తుంది (DOM మూలకంపై నిల్వ చేసిన డేటాను తొలగిస్తుంది). డెలిగేషన్‌ను ఉపయోగించే పాపోవర్‌లు (అవి ఎంపికను ఉపయోగించి సృష్టించబడతాయి ) 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

ఈవెంట్స్

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