Source

ପପୋଭର୍ସ |

ଆପଣଙ୍କ ସାଇଟରେ ଥିବା ଯେକ element ଣସି ଉପାଦାନରେ ଆଇଓଏସରେ ମିଳୁଥିବା ପରି ବୁଟଷ୍ଟ୍ରାପ୍ ପପୋଭର ଯୋଡିବା ପାଇଁ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ଉଦାହରଣ |

ସମୀକ୍ଷା

ପପଓଭର ପ୍ଲଗଇନ ବ୍ୟବହାର କରିବା ସମୟରେ ଜାଣିବା ଜିନିଷ:

  • ପୋଜିଭର୍ସ ପୋଜିସନ୍ ପାଇଁ ତୃତୀୟ ପକ୍ଷ ଲାଇବ୍ରେରୀ Popper.js ଉପରେ ନିର୍ଭର କରେ | Bootstrap.js ପୂର୍ବରୁ ଆପଣ popper.min.js ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଉଚିତ କିମ୍ବା ପପୋଭରଗୁଡିକ କାମ କରିବା ପାଇଁ Popper.js ଧାରଣ କରିଥାଏ bootstrap.bundle.min.js/ ବ୍ୟବହାର କରନ୍ତୁ!bootstrap.bundle.js
  • ପପୋଭର୍ସ ଏକ ନିର୍ଭରଶୀଳତା ଭାବରେ ଟୁଲ୍ ଟିପ୍ ପ୍ଲଗଇନ୍ ଆବଶ୍ୟକ କରେ |
  • ଯଦି ଆପଣ ଉତ୍ସରୁ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ନିର୍ମାଣ କରୁଛନ୍ତି, ଏହା ଆବଶ୍ୟକ କରେutil.js |
  • କାର୍ଯ୍ୟଦକ୍ଷତା କାରଣରୁ ପପୋଭର୍ସ ଅପ୍ଟ-ଇନ୍ ଅଟେ, ତେଣୁ ଆପଣ ସେମାନଙ୍କୁ ନିଜେ ଆରମ୍ଭ କରିବା ଜରୁରୀ |
  • ଶୂନ-ଦ length ର୍ଘ୍ୟ titleଏବଂ contentମୂଲ୍ୟ କଦାପି ପପଓଭର ଦେଖାଇବ ନାହିଁ |
  • container: 'body'ଅଧିକ ଜଟିଳ ଉପାଦାନଗୁଡ଼ିକରେ ସମସ୍ୟା ସୃଷ୍ଟି ନକରିବାକୁ ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ (ଯେପରିକି ଆମର ଇନପୁଟ୍ ଗୋଷ୍ଠୀ, ବଟନ୍ ଗୋଷ୍ଠୀ, ଇତ୍ୟାଦି) |
  • ଲୁକ୍କାୟିତ ଉପାଦାନଗୁଡିକ ଉପରେ ପପଓଭରଗୁଡିକ ଟ୍ରିଗ୍ କରିବା କାମ କରିବ ନାହିଁ |
  • ଏକ ରାପର୍ ଉପାଦାନ ଉପରେ ପପୋଭର୍ସ .disabledକିମ୍ବା disabledଉପାଦାନଗୁଡ଼ିକ ଟ୍ରିଗର ହେବା ଜରୁରୀ |
  • ଯେତେବେଳେ ଆଙ୍କର୍ଗୁଡ଼ିକରୁ ଟ୍ରିଗର ହୁଏ ଯାହା ଏକାଧିକ ଧାଡିରେ ଗୁଡ଼ାଏ, ପପୋଭରଗୁଡ଼ିକ ଆଙ୍କର୍ଗୁଡ଼ିକର ସାମଗ୍ରିକ ମୋଟେଇ ମଧ୍ୟରେ କେନ୍ଦ୍ରୀଭୂତ ହେବ | ଏହି ଆଚରଣକୁ ଏଡାଇବା ପାଇଁ white-space: nowrap;ଆପଣଙ୍କ ଉପରେ ବ୍ୟବହାର କରନ୍ତୁ |<a>
  • ସେମାନଙ୍କର ଅନୁରୂପ ଉପାଦାନଗୁଡିକ DOM ରୁ ଅପସାରଣ ହେବା ପୂର୍ବରୁ ପପୋଭରଗୁଡିକ ଲୁକ୍କାୟିତ ହେବା ଜରୁରୀ |

କିଛି ଉଦାହରଣ ସହିତ ପପୋଭରଗୁଡିକ କିପରି କାମ କରେ ଦେଖିବା ପାଇଁ ପ reading ଼ନ୍ତୁ |

ଉଦାହରଣ: ସବୁ ସ୍ଥାନରେ ପପୋଭର ସକ୍ଷମ କରନ୍ତୁ |

ଏକ ପୃଷ୍ଠାରେ ସମସ୍ତ ପପୋଭର୍ ଆରମ୍ଭ କରିବାର ଗୋଟିଏ ଉପାୟ ହେଉଛି ସେଗୁଡିକୁ ସେମାନଙ୍କ data-toggleଗୁଣ ଅନୁଯାୟୀ ଚୟନ କରିବା:

$(function () {
  $('[data-toggle="popover"]').popover()
})

ଉଦାହରଣ: containerବିକଳ୍ପ ବ୍ୟବହାର କରି |

ଯେତେବେଳେ ଆପଣଙ୍କର ଏକ ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନରେ କିଛି ଶ yles ଳୀ ଅଛି ଯାହା ଏକ ପପ୍ ଓଭରରେ ବାଧା ସୃଷ୍ଟି କରେ, ଆପଣ ଏକ କଷ୍ଟମ୍ ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ଚାହାଁନ୍ତି containerଯାହା ଦ୍ pop ାରା ପପୋଭରର 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"ଯାହା ଦ୍ pop ାରା ପପୋଭର ଆପଣଙ୍କ ଉପଭୋକ୍ତାମାନଙ୍କୁ ତୁରନ୍ତ ଭିଜୁଆଲ୍ ଫିଡବ୍ୟାକ୍ ଭାବରେ ଦେଖାଯାଏ କାରଣ ସେମାନେ ଏକ ଅକ୍ଷମ ଉପାଦାନ ଉପରେ କ୍ଲିକ୍ କରିବାକୁ ଆଶା କରିପାରନ୍ତି ନାହିଁ |

<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 ଦୁର୍ବଳ ପରିବର୍ତ୍ତନ ପ୍ରୟୋଗ କରନ୍ତୁ |
ପାତ୍ର string | ଉପାଦାନ | ମିଥ୍ୟା ମିଥ୍ୟା

ପପଓଭରକୁ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଉପାଦାନରେ ଯୋଡେ | ଉଦାହରଣ : container: 'body'। ଏହି ବିକଳ୍ପଟି ବିଶେଷ ଭାବରେ ଉପଯୋଗୀ ଅଟେ କାରଣ ଏହା ଆପଣଙ୍କୁ ଟ୍ରାଇଜିଂ ଉପାଦାନ ନିକଟରେ ଡକ୍ୟୁମେଣ୍ଟର ପ୍ରବାହରେ ପପଓଭରକୁ ସ୍ଥାନିତ କରିବାକୁ ଅନୁମତି ଦେଇଥାଏ - ଯାହା ୱିଣ୍ଡୋ ଆକାର ବଦଳାଇବା ସମୟରେ ପପ୍-ଓଭରକୁ ଟ୍ରାଇଜିଂ ଉପାଦାନରୁ ଦୂରେଇ ଯିବାକୁ ପ୍ରତିରୋଧ କରିବ |

ବିଷୟବସ୍ତୁ string | ଉପାଦାନ | କାର୍ଯ୍ୟ ''

data-contentଯଦି ଗୁଣବତ୍ତା ଉପସ୍ଥିତ ନଥାଏ ତେବେ ଡିଫଲ୍ଟ ବିଷୟବସ୍ତୁ ମୂଲ୍ୟ |

ଯଦି ଏକ ଫଙ୍କସନ୍ ଦିଆଯାଏ, ତେବେ ଏହାର ଉପାଦାନ ସହିତ ଏହାର ରେଫରେନ୍ସ ସେଟ୍ ସହିତ ଡକାଯିବ thisଯାହା ପପ୍ ଓଭର ସହିତ ସଂଲଗ୍ନ ହୋଇଛି |

ବିଳମ୍ବ ସଂଖ୍ୟା | ବସ୍ତୁ 0

ପପଓଭର (ms) ଦେଖାଇବା ଏବଂ ଲୁଚାଇବାରେ ବିଳମ୍ବ - ମାନୁଆଲ ଟ୍ରିଗର ପ୍ରକାର ପାଇଁ ପ୍ରଯୁଜ୍ୟ ନୁହେଁ |

ଯଦି ଏକ ସଂଖ୍ୟା ଯୋଗାଇ ଦିଆଯାଏ, ଉଭୟ ଲୁଚାଇବା / ଶୋ ପାଇଁ ବିଳମ୍ବ ପ୍ରୟୋଗ କରାଯାଏ |

ବସ୍ତୁ ଗଠନ ହେଉଛି:delay: { "show": 500, "hide": 100 }

html ବୁଲିଅନ୍ ମିଥ୍ୟା ପପଓଭରରେ HTML ସନ୍ନିବେଶ କରନ୍ତୁ | textଯଦି ମିଥ୍ୟା, DQ ରେ ବିଷୟବସ୍ତୁ ସନ୍ନିବେଶ କରିବାକୁ jQuery ର ପଦ୍ଧତି ବ୍ୟବହୃତ ହେବ | ଯଦି ଆପଣ XSS ଆକ୍ରମଣ ବିଷୟରେ ଚିନ୍ତିତ ତେବେ ପାଠ ବ୍ୟବହାର କରନ୍ତୁ |
ସ୍ଥାନ string | କାର୍ଯ୍ୟ 'ଠିକ୍'

ପପୋଭରକୁ କିପରି ସ୍ଥାନିତ କରିବେ - ଅଟୋ | ଶୀର୍ଷ | ତଳ | ବାମ | ଠିକ୍
ଯେତେବେଳେ autoନିର୍ଦ୍ଦିଷ୍ଟ କରାଯାଏ, ଏହା ଗତିଶୀଳ ଭାବରେ ପପୋଭରକୁ ପୁନ ori ପରିବର୍ତ୍ତନ କରିବ |

ଯେତେବେଳେ ପ୍ଲେସମେଣ୍ଟ ନିର୍ଣ୍ଣୟ କରିବା ପାଇଁ ଏକ ଫଙ୍କସନ୍ ବ୍ୟବହୃତ ହୁଏ, ଏହାକୁ ପପଓଭର DOM ନୋଡ ସହିତ ଏହାର ପ୍ରଥମ ଆର୍ଗୁମେଣ୍ଟ ଏବଂ ଟ୍ରାଇଜିଂ ଉପାଦାନ DOM ନୋଡକୁ ଦ୍ୱିତୀୟ ଭାବରେ କୁହାଯାଏ | thisପ୍ରସଙ୍ଗଟି ପପ୍-ଓଭର ଉଦାହରଣରେ ସେଟ୍ ହୋଇଛି |

ଚୟନକର୍ତ୍ତା | string | ମିଥ୍ୟା ମିଥ୍ୟା ଯଦି ଏକ ଚୟନକର୍ତ୍ତା ପ୍ରଦାନ କରାଯାଏ, ପପଓଭର ବସ୍ତୁଗୁଡିକ ନିର୍ଦ୍ଦିଷ୍ଟ ଲକ୍ଷ୍ୟସ୍ଥଳରେ ନ୍ୟସ୍ତ ହେବ | ଅଭ୍ୟାସରେ, ପପୋଭର୍ସ ଯୋଡିବାକୁ ଗତିଶୀଳ 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ଶ୍ରେଣୀ ରହିବା ଉଚିତ୍ |

ଆଖ୍ୟା string | ଉପାଦାନ | କାର୍ଯ୍ୟ ''

titleଯଦି ଗୁଣବତ୍ତା ଉପସ୍ଥିତ ନଥାଏ ତେବେ ଡିଫଲ୍ଟ ଟାଇଟଲ୍ ମୂଲ୍ୟ |

ଯଦି ଏକ ଫଙ୍କସନ୍ ଦିଆଯାଏ, ତେବେ ଏହାର ଉପାଦାନ ସହିତ ଏହାର ରେଫରେନ୍ସ ସେଟ୍ ସହିତ ଡକାଯିବ thisଯାହା ପପ୍ ଓଭର ସହିତ ସଂଲଗ୍ନ ହୋଇଛି |

ଟ୍ରିଗର ଷ୍ଟ୍ରିଙ୍ଗ୍ 'କ୍ଲିକ୍' ପପଓଭର କିପରି ଟ୍ରିଗର ହୁଏ - କ୍ଲିକ୍ କରନ୍ତୁ | ହୋଭର | ଧ୍ୟାନ | ମାନୁଆଲ୍ | ଆପଣ ଏକାଧିକ ଟ୍ରିଗର ପାସ୍ କରିପାରନ୍ତି; ସେମାନଙ୍କୁ ଏକ ସ୍ପେସ୍ ସହିତ ଅଲଗା କର | "ମାନୁଆଲ୍" ଅନ୍ୟ କ trig ଣସି ଟ୍ରିଗର ସହିତ ମିଳିତ ହୋଇପାରିବ ନାହିଁ |
ଅଫସେଟ ସଂଖ୍ୟା | ଷ୍ଟ୍ରିଙ୍ଗ୍ 0 ଏହାର ଟାର୍ଗେଟ୍ ସହିତ ପପଓଭରର ଅଫସେଟ୍ | ଅଧିକ ସୂଚନା ପାଇଁ Popper.js ର ଅଫସେଟ୍ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ |
ପତନ string | ଆରେ 'ଫ୍ଲିପ୍' ପପ୍ପର କେଉଁ ଅବସ୍ଥାରେ ଫଲବ୍ୟାକ୍ ବ୍ୟବହାର କରିବ ତାହା ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ଅନୁମତି ଦିଅନ୍ତୁ | ଅଧିକ ସୂଚନା ପାଇଁ Popper.js ର ଆଚରଣ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ |
ସୀମା string | ଉପାଦାନ 'ସ୍କ୍ରୋଲ୍ ପ୍ୟାରେଣ୍ଟ୍' ପପୋଭରର ଓଭରଫ୍ଲୋ ସୀମାବଦ୍ଧ ସୀମା | 'viewport',, କିମ୍ବା ଏକ HTMLElement ରେଫରେନ୍ସ (କେବଳ ଜାଭାସ୍କ୍ରିପ୍ଟ) 'window'ର ମୂଲ୍ୟ ଗ୍ରହଣ କରେ | 'scrollParent'ଅଧିକ ସୂଚନା ପାଇଁ Popper.js ର ପ୍ରତିରୋଧ ଓଭରଫ୍ଲୋ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ |

ବ୍ୟକ୍ତିଗତ ପପୋଭର ପାଇଁ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ |

ବ୍ୟକ୍ତିଗତ ପପୋଭରଗୁଡ଼ିକ ପାଇଁ ବିକଳ୍ପଗୁଡ଼ିକ ବିକଳ୍ପ ଭାବରେ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର ଦ୍ୱାରା ନିର୍ଦ୍ଦିଷ୍ଟ କରାଯାଇପାରିବ, ଯେପରି ଉପରେ ବର୍ଣ୍ଣନା କରାଯାଇଛି |

ପ୍ରଣାଳୀ

ଅସନ୍ତୁଳିତ ପଦ୍ଧତି ଏବଂ ସ୍ଥାନାନ୍ତରଣ |

ସମସ୍ତ 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')

ଏକ ଉପାଦାନର ପପଓଭର ଦେଖାଇବାକୁ କ୍ଷମତା ଦେଇଥାଏ | ଡିଫଲ୍ଟ ଭାବରେ ପପୋଭର୍ସ ସକ୍ଷମ ହୋଇଛି |

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

.popover('disable')

ଏକ ଉପାଦାନର ପପଓଭର ଦେଖାଯିବାର କ୍ଷମତା ଅପସାରଣ କରେ | ପୁନ re- ସକ୍ଷମ ହେଲେ ପପ୍ ଓଭର କେବଳ ଦେଖାଯିବାକୁ ସମର୍ଥ ହେବ |

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

.popover('toggleEnabled')

ଏକ ଉପାଦାନର ପପଓଭର ଦେଖାଯିବା କିମ୍ବା ଲୁଚାଇବା ପାଇଁ କ୍ଷମତାକୁ ଟୋଗଲ୍ କରେ |

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

.popover('update')

ଏକ ଉପାଦାନର ପପଓଭରର ସ୍ଥିତିକୁ ଅଦ୍ୟତନ କରେ |

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

ଘଟଣା

ଇଭେଣ୍ଟ ପ୍ରକାର | ବର୍ଣ୍ଣନା
show.bs.popover showଉଦାହରଣ ପଦ୍ଧତି ଡାକିବା ପରେ ଏହି ଘଟଣା ତୁରନ୍ତ ନିଆଁ ଲାଗେ |
show.bs.popover ଯେତେବେଳେ ଉପଭୋକ୍ତାଙ୍କୁ ପପଓଭର ଦୃଶ୍ୟମାନ ହେଲା ସେତେବେଳେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ (CSS ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) |
hide.bs.popover hideଉଦାହରଣ ପଦ୍ଧତି ଡକାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟ ତୁରନ୍ତ ବରଖାସ୍ତ ହୁଏ |
hidden.bs.popover ଯେତେବେଳେ ପପଓଭର ବ୍ୟବହାରକାରୀଙ୍କଠାରୁ ଲୁକ୍କାୟିତ ହୋଇସାରିଛି (CSS ସ୍ଥାନାନ୍ତରଣକୁ ଅପେକ୍ଷା କରିବ)
inserted.bs.popover show.bs.popoverଯେତେବେଳେ ପପ୍ ଓଭର ଟେମ୍ପଲେଟ୍ DOM ରେ ଯୋଡା ଯାଇଛି , ଇଭେଣ୍ଟ ପରେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ |
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})