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ఎలిమెంట్స్ తప్పనిసరిగా ట్రిగ్గర్ చేయబడాలి.
బహుళ పంక్తులలో చుట్టబడిన యాంకర్‌ల నుండి ప్రేరేపించబడినప్పుడు, యాంకర్‌ల మొత్తం వెడల్పు మధ్య పాపోవర్‌లు కేంద్రీకృతమై ఉంటాయి. ఈ ప్రవర్తనను నివారించడానికి .text-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ని చొప్పించండి. తప్పు అయితే, `text`DOMలో కంటెంట్‌ని చొప్పించడానికి 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`. `.arrow`popover యొక్క బాణం అవుతుంది. బయటి రేపర్ మూలకం `.popover`తరగతిని కలిగి ఉండాలి.
శీర్షిక	స్ట్రింగ్ \| మూలకం \| ఫంక్షన్	''	`title`లక్షణం లేకుంటే డిఫాల్ట్ శీర్షిక విలువ . `this`ఒక ఫంక్షన్ ఇవ్వబడితే, అది పాప్‌ఓవర్ జోడించబడిన మూలకానికి దాని సూచనతో పిలవబడుతుంది .
ట్రిగ్గర్	స్ట్రింగ్	'క్లిక్'	పాప్‌ఓవర్ ఎలా ప్రేరేపించబడుతుంది - క్లిక్ \| హోవర్ \| దృష్టి \| మాన్యువల్. మీరు బహుళ ట్రిగ్గర్‌లను పాస్ చేయవచ్చు; వాటిని ఖాళీతో వేరు చేయండి. `manual`మరే ఇతర ట్రిగ్గర్‌తో కలపడం సాధ్యం కాదు.
ఆఫ్సెట్	సంఖ్య \| స్ట్రింగ్	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…
})