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ଉପାଦାନଗୁଡ଼ିକ ଟ୍ରିଗର ହେବା ଜରୁରୀ |
  • ଯେତେବେଳେ ଆଙ୍କର୍ଗୁଡ଼ିକରୁ ଟ୍ରିଗର ହୁଏ ଯାହା ଏକାଧିକ ଧାଡିରେ ଗୁଡ଼ାଏ, ପପୋଭରଗୁଡ଼ିକ ଆଙ୍କର୍ଗୁଡ଼ିକର ସାମଗ୍ରିକ ମୋଟେଇ ମଧ୍ୟରେ କେନ୍ଦ୍ରୀଭୂତ ହେବ | ଏହି ଆଚରଣକୁ ଏଡାଇବା ପାଇଁ .text-nowrapଆପଣଙ୍କ ଉପରେ ବ୍ୟବହାର କରନ୍ତୁ |<a>
  • ସେମାନଙ୍କର ଅନୁରୂପ ଉପାଦାନଗୁଡିକ DOM ରୁ ଅପସାରଣ ହେବା ପୂର୍ବରୁ ପପୋଭରଗୁଡିକ ଲୁକ୍କାୟିତ ହେବା ଜରୁରୀ |
  • ଏକ ଛାୟା DOM ଭିତରେ ଥିବା ଏକ ଉପାଦାନ ଯୋଗୁଁ ପପୋଭରଗୁଡିକ ଟ୍ରିଗର ହୋଇପାରେ |

ଏହି ଉପାଦାନର ଆନିମେସନ୍ ପ୍ରଭାବ prefers-reduced-motionମିଡିଆ ଜିଜ୍ଞାସା ଉପରେ ନିର୍ଭରଶୀଳ | ଆମର ଆକ୍ସେସିବିଲିଟି ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ର ହ୍ରାସ ହୋଇଥିବା ଗତି ବିଭାଗ ଦେଖନ୍ତୁ |

କିଛି ଉଦାହରଣ ସହିତ ପପୋଭରଗୁଡିକ କିପରି କାମ କରେ ଦେଖିବା ପାଇଁ ପ 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)

କୀବୋର୍ଡ୍ ଏବଂ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ପପୋଭର ତିଆରି କରିବା |

କୀବୋର୍ଡ୍ ଉପଭୋକ୍ତାମାନଙ୍କୁ ଆପଣଙ୍କର ପପୋଭର୍ ସକ୍ରିୟ କରିବାକୁ ଅନୁମତି ଦେବାକୁ, ଆପଣ ସେମାନଙ୍କୁ କେବଳ HTML ଉପାଦାନଗୁଡ଼ିକରେ ଯୋଡିବା ଉଚିତ ଯାହା ପାରମ୍ପାରିକ ଭାବରେ କୀବୋର୍ଡ୍-ଫୋକସେବଲ୍ ଏବଂ ଇଣ୍ଟରାକ୍ଟିଭ୍ (ଯେପରିକି ଲିଙ୍କ୍ କିମ୍ବା ଫର୍ମ କଣ୍ଟ୍ରୋଲ୍) | ଯଦିଓ ଇଚ୍ଛାଧୀନ HTML ଉପାଦାନଗୁଡିକ (ଯେପରିକି <span>s) ଗୁଣବତ୍ତା ଯୋଗକରି ଫୋକସେବଲ୍ ହୋଇପାରିବ tabindex="0", ଏହା କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ଅଣ-ଇଣ୍ଟରାକ୍ଟିଭ୍ ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ସମ୍ଭାବ୍ୟ ବିରକ୍ତିକର ଏବଂ ଦ୍ୱନ୍ଦ୍ୱପୂର୍ଣ୍ଣ ଟ୍ୟାବ୍ ଷ୍ଟପ୍ ଯୋଗ କରିବ ଏବଂ ଅଧିକାଂଶ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ବର୍ତ୍ତମାନ ଏହି ପରିସ୍ଥିତିରେ ପପୋଭରର ବିଷୟବସ୍ତୁ ଘୋଷଣା କରେ ନାହିଁ | । ଅତିରିକ୍ତ ଭାବରେ, କେବଳ ଆପଣଙ୍କର ପପୋଭର୍ ପାଇଁ ଟ୍ରିଗର ଭାବରେ ନିର୍ଭର କରନ୍ତୁ ନାହିଁ hover, କାରଣ ଏହା ସେମାନଙ୍କୁ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ଟ୍ରିଗର କରିବା ଅସମ୍ଭବ କରିବ |

ଯେତେବେଳେ ଆପଣ ବିକଳ୍ପ ସହିତ ପପୋଭରରେ ସମୃଦ୍ଧ, ସଂରଚନା HTML ସନ୍ନିବେଶ କରିପାରିବେ html, ଆମେ ଦୃ strongly ଭାବରେ ପରାମର୍ଶ ଦେଉଛୁ ଯେ ଆପଣ ଅତ୍ୟଧିକ ପରିମାଣର ବିଷୟବସ୍ତୁ ଯୋଡିବା ଠାରୁ ଦୂରେଇ ରୁହନ୍ତୁ | ପପୋଭରଗୁଡିକ ବର୍ତ୍ତମାନ କାର୍ଯ୍ୟ କରିବାର ପଦ୍ଧତି ହେଉଛି, ଥରେ ପ୍ରଦର୍ଶିତ ହେଲେ, ସେମାନଙ୍କର ବିଷୟବସ୍ତୁ aria-describedbyଗୁଣ ସହିତ ଟ୍ରିଗର ଉପାଦାନ ସହିତ ବନ୍ଧା | ଫଳସ୍ୱରୂପ, ପପୋଭରର ବିଷୟବସ୍ତୁର ସମ୍ପୁର୍ଣ୍ଣତା ଟେକ୍ନୋଲୋଜି ବ୍ୟବହାରକାରୀଙ୍କୁ ଏକ ଲମ୍ବା, ନିରବଚ୍ଛିନ୍ନ ଷ୍ଟ୍ରିମ୍ ଭାବରେ ସହାୟତା କରିବାକୁ ଘୋଷଣା କରାଯିବ |

ଅତିରିକ୍ତ ଭାବରେ, ଯେତେବେଳେ ଆପଣଙ୍କର ପପଓଭରରେ ଇଣ୍ଟରାକ୍ଟିଭ୍ କଣ୍ଟ୍ରୋଲ୍ (ଯେପରିକି ଫର୍ମ ଉପାଦାନ କିମ୍ବା ଲିଙ୍କ୍) ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ସମ୍ଭବ ଅଟେ (ଏହି ଉପାଦାନଗୁଡ଼ିକୁ whiteListକିମ୍ବା ଅନୁମତିପ୍ରାପ୍ତ ଗୁଣ ଏବଂ ଟ୍ୟାଗରେ ଯୋଗ କରି), ସାବଧାନ ରୁହନ୍ତୁ ଯେ ସମ୍ପ୍ରତି ପପୋଭର କୀବୋର୍ଡ୍ ଫୋକସ୍ କ୍ରମ ପରିଚାଳନା କରେ ନାହିଁ | ଯେତେବେଳେ ଏକ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀ ଏକ ପପ୍ ଓଭର ଖୋଲନ୍ତି, ଧ୍ୟାନ ଟ୍ରାଇଜିଂ ଉପାଦାନ ଉପରେ ରହିଥାଏ, ଏବଂ ଯେହେତୁ ପପଓଭର ସାଧାରଣତ document ଡକ୍ୟୁମେଣ୍ଟର ସଂରଚନାରେ ଟ୍ରିଗରକୁ ଅନୁସରଣ କରେ ନାହିଁ, ଆଗକୁ ବ press ିବା / ଦବାଇବାର କ guarantee ଣସି ଗ୍ୟାରେଣ୍ଟି ନାହିଁ |TABଏକ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀଙ୍କୁ ନିଜେ ପପ୍ ଓଭରରେ ସ୍ଥାନାନ୍ତର କରିବ | ସଂକ୍ଷେପରେ, ଏକ ପପଅଭରରେ କେବଳ ଇଣ୍ଟରାକ୍ଟିଭ୍ କଣ୍ଟ୍ରୋଲ୍ ଯୋଡିବା, ଏହି ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକୁ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀ ଏବଂ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ଅପହଞ୍ଚ / ବ୍ୟବହାରଯୋଗ୍ୟ କରିପାରେ, କିମ୍ବା ଅତି କମରେ ଏକ ଅଯ og କ୍ତିକ ସାମଗ୍ରିକ ଫୋକସ୍ ଅର୍ଡର ପାଇଁ | ଏହି କ୍ଷେତ୍ରରେ, ଏହା ପରିବର୍ତ୍ତେ ଏକ ମୋଡାଲ୍ ସଂଳାପ ବ୍ୟବହାର କରିବାକୁ ବିଚାର କରନ୍ତୁ |

ବିକଳ୍ପଗୁଡ଼ିକ

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-ଯେପରି ଯୋଡନ୍ତୁ data-animation=""|

ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ସୁରକ୍ଷା କାରଣରୁ sanitize, sanitizeFnଏବଂ whiteListବିକଳ୍ପଗୁଡ଼ିକ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରି ଯୋଗାଇ ଦିଆଯାଇପାରିବ ନାହିଁ |

ନାମ ଟାଇପ୍ କରନ୍ତୁ | ଡିଫଲ୍ଟ | ବର୍ଣ୍ଣନା
ଆନିମେସନ୍ ବୁଲିଅନ୍ ସତ ପପଓଭରକୁ ଏକ 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ଯାହା ପପ୍ ଓଭର ସହିତ ସଂଲଗ୍ନ ହୋଇଛି |

ଟ୍ରିଗର ଷ୍ଟ୍ରିଙ୍ଗ୍ 'କ୍ଲିକ୍' ପପଓଭର କିପରି ଟ୍ରିଗର ହୁଏ - କ୍ଲିକ୍ କରନ୍ତୁ | ହୋଭର | ଧ୍ୟାନ | ମାନୁଆଲ୍ | ଆପଣ ଏକାଧିକ ଟ୍ରିଗର ପାସ୍ କରିପାରନ୍ତି; ସେମାନଙ୍କୁ ଏକ ସ୍ପେସ୍ ସହିତ ଅଲଗା କର | manualଅନ୍ୟ କ trig ଣସି ଟ୍ରିଗର ସହିତ ମିଳିତ ହୋଇପାରିବ ନାହିଁ |
ଅଫସେଟ ସଂଖ୍ୟା | ଷ୍ଟ୍ରିଙ୍ଗ୍ 0 ଏହାର ଟାର୍ଗେଟ୍ ସହିତ ପପଓଭରର ଅଫସେଟ୍ | ଅଧିକ ସୂଚନା ପାଇଁ Popper.js ର ଅଫସେଟ୍ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ |
ପତନ string | ଆରେ 'ଫ୍ଲିପ୍' ପପ୍ପର କେଉଁ ଅବସ୍ଥାରେ ଫଲବ୍ୟାକ୍ ବ୍ୟବହାର କରିବ ତାହା ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ଅନୁମତି ଦିଅନ୍ତୁ | ଅଧିକ ସୂଚନା ପାଇଁ Popper.js ର ଆଚରଣ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ |
ସୀମା string | ଉପାଦାନ 'ସ୍କ୍ରୋଲ୍ ପ୍ୟାରେଣ୍ଟ୍' ପପୋଭରର ଓଭରଫ୍ଲୋ ସୀମାବଦ୍ଧ ସୀମା | 'viewport',, କିମ୍ବା ଏକ HTMLElement ରେଫରେନ୍ସ (କେବଳ ଜାଭାସ୍କ୍ରିପ୍ଟ) 'window'ର ମୂଲ୍ୟ ଗ୍ରହଣ କରେ | 'scrollParent'ଅଧିକ ସୂଚନା ପାଇଁ Popper.js ର ପ୍ରତିରୋଧ ଓଭରଫ୍ଲୋ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ |
ପରିମଳ ବୁଲିଅନ୍ ସତ ପରିମଳକରଣକୁ ସକ୍ଷମ କିମ୍ବା ଅକ୍ଷମ କରନ୍ତୁ | ଯଦି ସକ୍ରିୟ ହୁଏ 'template', 'content'ଏବଂ 'title'ବିକଳ୍ପଗୁଡିକ ସାନିଟାଇଜ୍ ହେବ |
ଧଳା ତାଲିକା | ବସ୍ତୁ ଡିଫଲ୍ଟ ମୂଲ୍ୟ ଅବଜେକ୍ଟ ଯାହା ଅନୁମତିପ୍ରାପ୍ତ ଗୁଣ ଏବଂ ଟ୍ୟାଗ୍ ଧାରଣ କରେ |
sanitizeFn null | କାର୍ଯ୍ୟ ଶୂନ୍ୟ ଏଠାରେ ଆପଣ ନିଜର ସାନିଟାଇଜ୍ ଫଙ୍କସନ୍ ଯୋଗାଇ ପାରିବେ | ସାନିଟାଇଜେସନ୍ କରିବା ପାଇଁ ଯଦି ଆପଣ ଏକ ଉତ୍ସର୍ଗୀକୃତ ଲାଇବ୍ରେରୀ ବ୍ୟବହାର କରିବାକୁ ପସନ୍ଦ କରନ୍ତି ତେବେ ଏହା ଉପଯୋଗୀ ହୋଇପାରେ |
popperConfig null | ବସ୍ତୁ ଶୂନ୍ୟ Bootstrap ର ଡିଫଲ୍ଟ Popper.js ବିନ୍ୟାସ ପରିବର୍ତ୍ତନ କରିବାକୁ, 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...
})