ପପୋଭର୍ସ |

ସମୀକ୍ଷା

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

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

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

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

ଏକ ପୃଷ୍ଠାରେ ସମସ୍ତ ପପୋଭର୍ ଆରମ୍ଭ କରିବାର ଗୋଟିଏ ଉପାୟ ହେଉଛି ସେଗୁଡିକୁ ସେମାନଙ୍କ 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ବିକଳ୍ପ ବ୍ୟବହାର କରି |

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

<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()

ସକ୍ଷମ କରନ୍ତୁ |

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

myPopover.enable()

ଅକ୍ଷମ କରନ୍ତୁ |

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

myPopover.disable()

ଟୋଗଲ୍ ସକ୍ଷମ |

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

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...
})