Source

Popovers

మీ సైట్‌లోని ఏదైనా ఎలిమెంట్‌కి iOSలో కనిపించేలా బూట్‌స్ట్రాప్ పాప్‌ఓవర్‌లను జోడించడానికి డాక్యుమెంటేషన్ మరియు ఉదాహరణలు.

అవలోకనం

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

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

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

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

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

వాడుక

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

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

ఎంపికలు

ఎంపికలు డేటా లక్షణాలు లేదా జావాస్క్రిప్ట్ ద్వారా పంపబడతాయి. డేటా అట్రిబ్యూట్‌ల కోసం, ఎంపిక పేరును data-, లో వలె జత చేయండి data-animation="".

పేరు టైప్ చేయండి డిఫాల్ట్ వివరణ
యానిమేషన్ బూలియన్ నిజం పాప్‌ఓవర్‌కి CSS ఫేడ్ ట్రాన్సిషన్‌ని వర్తింపజేయండి
కంటైనర్ స్ట్రింగ్ | మూలకం | తప్పుడు తప్పుడు

పాప్‌ఓవర్‌ని నిర్దిష్ట మూలకానికి జోడిస్తుంది. ఉదాహరణ: container: 'body'. ఈ ఐచ్ఛికం ముఖ్యంగా ఉపయోగకరంగా ఉంటుంది, ఇది పత్రం యొక్క ప్రవాహంలో ట్రిగ్గరింగ్ ఎలిమెంట్‌కు సమీపంలో పాప్‌ఓవర్‌ను ఉంచడానికి మిమ్మల్ని అనుమతిస్తుంది - ఇది విండో పరిమాణాన్ని మార్చే సమయంలో ట్రిగ్గరింగ్ ఎలిమెంట్ నుండి పాప్‌ఓవర్ తేలకుండా చేస్తుంది.

విషయము స్ట్రింగ్ | మూలకం | ఫంక్షన్ ''

data-contentలక్షణం లేకుంటే డిఫాల్ట్ కంటెంట్ విలువ .

thisఒక ఫంక్షన్ ఇవ్వబడితే, అది పాప్‌ఓవర్ జోడించబడిన మూలకానికి దాని సూచనతో పిలవబడుతుంది .

ఆలస్యం సంఖ్య | వస్తువు 0

popover (ms)ని చూపడం మరియు దాచడం ఆలస్యం - మాన్యువల్ ట్రిగ్గర్ రకానికి వర్తించదు

నంబర్ సరఫరా చేయబడితే, దాచు/చూపడం రెండింటికీ ఆలస్యం వర్తించబడుతుంది

వస్తువు నిర్మాణం:delay: { "show": 500, "hide": 100 }

html బూలియన్ తప్పుడు పాప్‌ఓవర్‌లో HTMLని చొప్పించండి. తప్పు అయితే, textDOMలో కంటెంట్‌ని చొప్పించడానికి j క్వెరీ పద్ధతి ఉపయోగించబడుతుంది. మీరు 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.

.arrowpopover యొక్క బాణం అవుతుంది.

బయటి రేపర్ మూలకం .popoverతరగతిని కలిగి ఉండాలి.

శీర్షిక స్ట్రింగ్ | మూలకం | ఫంక్షన్ ''

titleలక్షణం లేకుంటే డిఫాల్ట్ శీర్షిక విలువ .

thisఒక ఫంక్షన్ ఇవ్వబడితే, అది పాప్‌ఓవర్ జోడించబడిన మూలకానికి దాని సూచనతో పిలవబడుతుంది .

ట్రిగ్గర్ స్ట్రింగ్ 'క్లిక్' పాప్‌ఓవర్ ఎలా ప్రేరేపించబడుతుంది - క్లిక్ | హోవర్ | దృష్టి | మాన్యువల్. మీరు బహుళ ట్రిగ్గర్‌లను పాస్ చేయవచ్చు; వాటిని ఖాళీతో వేరు చేయండి. `మాన్యువల్` ఏ ఇతర ట్రిగ్గర్‌తోనూ కలపబడదు.
ఆఫ్సెట్ సంఖ్య | స్ట్రింగ్ 0 దాని లక్ష్యానికి సంబంధించి పాప్‌ఓవర్ ఆఫ్‌సెట్. మరింత సమాచారం కోసం Popper.js ఆఫ్‌సెట్ డాక్స్‌ని చూడండి .
ఫాల్‌బ్యాక్ ప్లేస్‌మెంట్ స్ట్రింగ్ | అమరిక 'ఫ్లిప్' ఫాల్‌బ్యాక్‌లో పాపర్ ఏ స్థానాన్ని ఉపయోగిస్తుందో పేర్కొనడానికి అనుమతించండి. మరింత సమాచారం కోసం Popper.js ప్రవర్తన పత్రాలను చూడండి
సరిహద్దు స్ట్రింగ్ | మూలకం 'స్క్రోల్ పేరెంట్' పాప్‌ఓవర్ యొక్క ఓవర్‌ఫ్లో పరిమితి సరిహద్దు. 'viewport', 'window', 'scrollParent', లేదా HTMLElement సూచన (జావాస్క్రిప్ట్ మాత్రమే) విలువలను అంగీకరిస్తుంది . మరింత సమాచారం కోసం Popper.js's preventOverflow డాక్స్‌ని చూడండి .

వ్యక్తిగత popovers కోసం డేటా లక్షణాలు

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

పద్ధతులు

అసమకాలిక పద్ధతులు మరియు పరివర్తనాలు

అన్ని API పద్ధతులు అసమకాలికమైనవి మరియు పరివర్తనను ప్రారంభిస్తాయి . వారు పరివర్తన ప్రారంభమైన వెంటనే కానీ అది ముగిసేలోపు కాలర్ వద్దకు తిరిగి వస్తారు . అదనంగా, పరివర్తన భాగంపై పద్ధతి కాల్ విస్మరించబడుతుంది .

మరింత సమాచారం కోసం మా జావాస్క్రిప్ట్ డాక్యుమెంటేషన్ చూడండి.

$().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')

మూలకం యొక్క పాప్‌ఓవర్‌కు చూపబడే సామర్థ్యాన్ని అందిస్తుంది. Popovers డిఫాల్ట్‌గా ప్రారంభించబడ్డాయి.

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

.popover('disable')

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

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

.popover('toggleEnabled')

మూలకం యొక్క పాప్‌ఓవర్ చూపబడే లేదా దాచబడే సామర్థ్యాన్ని టోగుల్ చేస్తుంది.

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

.popover('update')

మూలకం యొక్క పాప్‌ఓవర్ స్థానాన్ని నవీకరిస్తుంది.

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

ఈవెంట్స్

ఈవెంట్ రకం వివరణ
show.bs.popover ఇన్‌స్టెన్స్ మెథడ్‌ని పిలిచినప్పుడు ఈ ఈవెంట్ వెంటనే ఫైర్ అవుతుంది show.
చూపబడింది.bs.popover పాప్‌ఓవర్ వినియోగదారుకు కనిపించేలా చేసినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది (CSS పరివర్తనలు పూర్తయ్యే వరకు వేచి ఉంటుంది).
hide.bs.popover hideఉదాహరణ పద్ధతిని పిలిచినప్పుడు ఈ ఈవెంట్ వెంటనే తొలగించబడుతుంది .
దాచిన.bs.popover పాప్‌ఓవర్ వినియోగదారు నుండి దాచబడటం పూర్తయినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది (CSS పరివర్తనాలు పూర్తయ్యే వరకు వేచి ఉంటుంది).
insert.bs.popover show.bs.popoverపాప్‌ఓవర్ టెంప్లేట్ DOMకి జోడించబడిన ఈవెంట్ తర్వాత ఈ ఈవెంట్ తొలగించబడుతుంది .
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})