ମୁଖ୍ୟ ବିଷୟବସ୍ତୁକୁ ଯାଆନ୍ତୁ | ଡକସ୍ ନେଭିଗେସନ୍ କୁ ଯାଆନ୍ତୁ |
in English

ସାଧନଗୁଡ଼ିକ

ଆନିମେସନ୍ ପାଇଁ CSS3 ବ୍ୟବହାର କରି CSS ଏବଂ ଜାଭାସ୍କ୍ରିପ୍ଟ ସହିତ କଷ୍ଟମ୍ ବୁଟ୍ଷ୍ଟ୍ରାପ୍ ଟୁଲ୍ ଟିପ୍ସ ଯୋଡିବା ପାଇଁ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ଉଦାହରଣ |

ସମୀକ୍ଷା

ଟୁଲ୍ ଟିପ୍ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରିବା ସମୟରେ ଜାଣିବାକୁ ଥିବା ଜିନିଷଗୁଡିକ:

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

ସେ ସବୁ ପାଇଛନ୍ତି କି? ଉତ୍ତମ, ଆସନ୍ତୁ ଦେଖିବା ସେମାନେ କିପରି କିଛି ଉଦାହରଣ ସହିତ କାମ କରନ୍ତି |

ଉଦାହରଣ: ସର୍ବତ୍ର ଟୁଲ୍ ଟିପ୍ସ ସକ୍ଷମ କର |

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

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

ଉଦାହରଣଗୁଡିକ

ଟୁଲ୍ ଟିପ୍ସ ଦେଖିବାକୁ ନିମ୍ନ ଲିଙ୍କଗୁଡିକ ଉପରେ ଚଲାନ୍ତୁ:

ଟୁଲ୍ ଟିପ୍ସ ସହିତ କିଛି ଇନଲାଇନ୍ ଲିଙ୍କ୍ ପ୍ରଦର୍ଶନ କରିବାକୁ ପ୍ଲେସହୋଲ୍ଡର୍ ଟେକ୍ସଟ୍ | ଏହା ବର୍ତ୍ତମାନ କେବଳ ଫିଲର୍, ହତ୍ୟାକାରୀ ନୁହେଁ | ପ୍ରକୃତ ପାଠ୍ୟର ଉପସ୍ଥିତିକୁ ଅନୁକରଣ କରିବା ପାଇଁ ବିଷୟବସ୍ତୁ ଏଠାରେ ରଖାଯାଇଛି | ବାସ୍ତବ ଦୁନିଆ ପରିସ୍ଥିତିରେ ବ୍ୟବହୃତ ହେଲେ ଟୁଲ୍ ଟିପ୍ସ କିପରି ଦେଖାଯିବ ସେ ବିଷୟରେ କେବଳ ଏକ ଧାରଣା ଦେବା ପାଇଁ | ତେଣୁ ଆଶାକରେ ଆପଣ ବର୍ତ୍ତମାନ ଦେଖିଥିବେ ଲିଙ୍କଗୁଡ଼ିକରେ ଥିବା ଏହି ଟୁଲ୍ ଟିପ୍ସ ଅଭ୍ୟାସରେ କିପରି କାର୍ଯ୍ୟ କରିପାରିବ, ଥରେ ଆପଣ ଏହାକୁ ନିଜ ସାଇଟ୍ କିମ୍ବା ପ୍ରୋଜେକ୍ଟରେ ବ୍ୟବହାର କଲେ |

ଚାରୋଟି ଟୁଲ୍ ଟିପ୍ସ ଦିଗ ଦେଖିବା ପାଇଁ ନିମ୍ନରେ ଥିବା ବଟନ୍ ଉପରେ ଚଲାନ୍ତୁ: ଉପର, ଡାହାଣ, ତଳ ଏବଂ ବାମ | RTL ରେ ବୁଟଷ୍ଟ୍ରାପ୍ ବ୍ୟବହାର କରିବା ସମୟରେ ନିର୍ଦ୍ଦେଶଗୁଡ଼ିକ ପ୍ରତିବିମ୍ବିତ |

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

ଏବଂ କଷ୍ଟମ୍ HTML ସହିତ ଯୋଡା ଯାଇଛି:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

ଏକ SVG ସହିତ:

ସାସ୍ |

ଭେରିଏବଲ୍ |

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

ବ୍ୟବହାର

ଟୁଲ୍ ଟିପ୍ ପ୍ଲଗଇନ୍ ଚାହିଦା ଅନୁଯାୟୀ ବିଷୟବସ୍ତୁ ଏବଂ ମାର୍କଅପ୍ ସୃଷ୍ଟି କରେ ଏବଂ ଡିଫଲ୍ଟ ଭାବରେ ସେମାନଙ୍କ ଟ୍ରିଗର ଉପାଦାନ ପରେ ଟୁଲଟିପ୍ ସ୍ଥାନିତ କରେ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଟୁଲ୍ ଟିପ୍ ଟ୍ରିଗର୍ କରନ୍ତୁ:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
ଓଭରଫ୍ଲୋ autoଏବଂscroll

ଟୁଲଟିପ୍ ପୋଜିସନ୍ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ପରିବର୍ତ୍ତନ କରିବାକୁ ଚେଷ୍ଟା କରେ ଯେତେବେଳେ ଏକ ପ୍ୟାରେଣ୍ଟ୍ କଣ୍ଟେନର୍ ଆମ ପାଖରେ overflow: autoକିମ୍ବା overflow: scrollପସନ୍ଦ କରେ .table-responsive, କିନ୍ତୁ ତଥାପି ମୂଳ ପ୍ଲେସମେଣ୍ଟ୍ ର ପୋଜିସନ୍ ରଖେ | ଏହାର ସମାଧାନ ପାଇଁ, boundaryବିକଳ୍ପକୁ (ବିକଳ୍ପ ବ୍ୟବହାର କରି ଫ୍ଲିପ୍ ମୋଡିଫାୟର୍ ପାଇଁ popperConfig) ଯେକ any ଣସି HTMLElement କୁ ଡିଫଲ୍ଟ ମୂଲ୍ୟକୁ ନବଲିଖନ କରିବାକୁ ସେଟ୍ କରନ୍ତୁ 'clippingParents', ଯେପରି document.body:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

ମାର୍କଅପ୍ |

ଏକ ଟୁଲ୍ ଟିପ୍ ପାଇଁ ଆବଶ୍ୟକ ମାର୍କଅପ୍ କେବଳ ଏକ dataଗୁଣ ଏବଂ titleHTML ଉପାଦାନରେ ଆପଣ ଏକ ଟୁଲ୍ ଟିପ୍ ପାଇବାକୁ ଚାହୁଁଛନ୍ତି | ଏକ ଟୁଲ୍ ଟିପ୍ ର ଉତ୍ପାଦିତ ମାର୍କଅପ୍ ବହୁତ ସରଳ, ଯଦିଓ ଏହା ଏକ ଅବସ୍ଥାନ ଆବଶ୍ୟକ କରେ (ଡିଫଲ୍ଟ ଭାବରେ, topପ୍ଲଗଇନ୍ ଦ୍ୱାରା ସେଟ୍) |

କୀବୋର୍ଡ୍ ଏବଂ ସହାୟକ ଟେକ୍ନୋଲୋଜି ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ଟୁଲ୍ ଟିପ୍ସ ତିଆରି କରିବା |

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

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

ଅକ୍ଷମ ଉପାଦାନଗୁଡିକ |

ଆଟ୍ରିବ୍ୟୁଟ୍ ସହିତ ଉପାଦାନଗୁଡିକ disabledଇଣ୍ଟରାକ୍ଟିଭ୍ ନୁହେଁ, ଅର୍ଥାତ୍ ଉପଭୋକ୍ତାମାନେ ଏକ ଟୁଲ୍ ଟିପ୍ (କିମ୍ବା ପପ୍ ଓଭର) ଟ୍ରିଗର୍ କରିବାକୁ ଫୋକସ୍, ହୋଭର୍ କିମ୍ବା କ୍ଲିକ୍ କରିପାରିବେ ନାହିଁ | ଏକ ୱାର୍କଆଉଟ୍ ଭାବରେ, ଆପଣ ଏକ ରାପର୍ ରୁ ଟୁଲ୍ ଟିପ୍ ଟ୍ରିଗର୍ କରିବାକୁ ଚାହାଁନ୍ତି, <div>କିମ୍ବା <span>ବ୍ୟବହାର କରି କୀବୋର୍ଡ୍-ଫୋକସେବଲ୍ ବ୍ୟବହାର କରି tabindex="0"|

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

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

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-bs-ଯେପରି ଯୋଡନ୍ତୁ data-bs-animation=""| ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ ଅପ୍ସନ୍ ପାସ୍ କରିବା ସମୟରେ ଓଟ କେସ୍ ରୁ କେବାବ-କେସରେ ବିକଳ୍ପ ନାମର କେସ୍ ପ୍ରକାର ପରିବର୍ତ୍ତନ କରିବାକୁ ନିଶ୍ଚିତ କରନ୍ତୁ | ଉଦାହରଣ ସ୍ୱରୂପ, ବ୍ୟବହାର କରିବା ପରିବର୍ତ୍ତେ, data-bs-customClass="beautifier"ବ୍ୟବହାର କରନ୍ତୁ data-bs-custom-class="beautifier"|

ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ସୁରକ୍ଷା କାରଣରୁ sanitize, sanitizeFnଏବଂ allowListବିକଳ୍ପଗୁଡ଼ିକ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରି ଯୋଗାଇ ଦିଆଯାଇପାରିବ ନାହିଁ |
ନାମ ଟାଇପ୍ କରନ୍ତୁ | ଡିଫଲ୍ଟ | ବର୍ଣ୍ଣନା
animation ବୁଲିଅନ୍ true ଟୁଲ୍ ଟିପ୍ କୁ ଏକ CSS ଦୁର୍ବଳ ସ୍ଥାନାନ୍ତରଣ ପ୍ରୟୋଗ କରନ୍ତୁ |
container string | ଉପାଦାନ | ମିଥ୍ୟା false

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

delay ସଂଖ୍ୟା | ବସ୍ତୁ 0

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

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

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

html ବୁଲିଅନ୍ false

ଟୁଲ୍ ଟିପ୍ ରେ HTML କୁ ଅନୁମତି ଦିଅନ୍ତୁ |

ଯଦି ସତ, ଟୁଲ୍ ଟିପ୍ ରେ HTML ଟ୍ୟାଗ୍ ଟୁଲ୍ ଟିପ୍ titleରେ ଉପସ୍ଥାପିତ ହେବ | ଯଦି ମିଥ୍ୟା, innerTextDOM ରେ ବିଷୟବସ୍ତୁ ସନ୍ନିବେଶ କରିବାକୁ ସମ୍ପତ୍ତି ବ୍ୟବହୃତ ହେବ |

ଯଦି ଆପଣ XSS ଆକ୍ରମଣ ବିଷୟରେ ଚିନ୍ତିତ ତେବେ ପାଠ ବ୍ୟବହାର କରନ୍ତୁ |

placement string | କାର୍ଯ୍ୟ 'top'

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

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

selector string | ମିଥ୍ୟା false ଯଦି ଏକ ଚୟନକର୍ତ୍ତା ପ୍ରଦାନ କରାଯାଏ, ଟୁଲ୍ ଟିପ୍ ବସ୍ତୁଗୁଡିକ ନିର୍ଦ୍ଦିଷ୍ଟ ଲକ୍ଷ୍ୟସ୍ଥଳରେ ନ୍ୟସ୍ତ ହେବ | jQuery.onଅଭ୍ୟାସରେ, ଏହା ଗତିଶୀଳ ଭାବରେ ଯୋଡିଥିବା DOM ଉପାଦାନଗୁଡିକ ( ସମର୍ଥନ) ରେ ଟୁଲ୍ ଟିପ୍ସ ପ୍ରୟୋଗ କରିବା ପାଇଁ ବ୍ୟବହୃତ ହୁଏ | ଏହାକୁ ଏବଂ ଏକ ସୂଚନାପୂର୍ଣ୍ଣ ଉଦାହରଣ ଦେଖନ୍ତୁ |
template ଷ୍ଟ୍ରିଙ୍ଗ୍ '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

ଟୁଲ୍ ଟିପ୍ ତିଆରି କରିବା ସମୟରେ ବ୍ୟବହାର କରିବାକୁ HTML କୁ ଆଧାର କରନ୍ତୁ |

ଟୁଲ୍ ଟିପ୍ ର titleଇଞ୍ଜେକ୍ସନ ଦିଆଯିବ .tooltip-inner|

.tooltip-arrowଟୁଲ୍ ଟିପ୍ ର ତୀର ହେବ |

ବାହ୍ୟ ରାପର୍ ଉପାଦାନର .tooltipଶ୍ରେଣୀ ରହିବା ଉଚିତ ଏବଂ role="tooltip"

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

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

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

trigger ଷ୍ଟ୍ରିଙ୍ଗ୍ 'hover focus'

ଟୁଲ୍ ଟିପ୍ କିପରି ଟ୍ରିଗର ହୁଏ - କ୍ଲିକ୍ କରନ୍ତୁ | ହୋଭର | ଧ୍ୟାନ | ମାନୁଆଲ୍ | ଆପଣ ଏକାଧିକ ଟ୍ରିଗର ପାସ୍ କରିପାରନ୍ତି; ସେମାନଙ୍କୁ ଏକ ସ୍ପେସ୍ ସହିତ ଅଲଗା କର |

'manual'.show()ସୂଚାଇଥାଏ ଯେ ଟୁଲ୍ ଟିପ୍ ପ୍ରୋଗ୍ରାମେଟିକ୍ ଭାବରେ , .hide()ଏବଂ .toggle()ପଦ୍ଧତି ମାଧ୍ୟମରେ ଟ୍ରିଗର ହେବ ; ଏହି ମୂଲ୍ୟ ଅନ୍ୟ କ trig ଣସି ଟ୍ରିଗର ସହିତ ମିଳିତ ହୋଇପାରିବ ନାହିଁ |

'hover'ଏହା ନିଜେ ଟୁଲ୍ ଟିପ୍ସ ସୃଷ୍ଟି କରିବ ଯାହା କି-ବୋର୍ଡ ମାଧ୍ୟମରେ ଟ୍ରିଗର ହୋଇପାରିବ ନାହିଁ, ଏବଂ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ସମାନ ସୂଚନା ପହଞ୍ଚାଇବା ପାଇଁ ବିକଳ୍ପ ପଦ୍ଧତି ଉପସ୍ଥିତ ଥିଲେ ହିଁ ବ୍ୟବହାର କରାଯିବା ଉଚିତ |

fallbackPlacements ଆରେ ['top', 'right', 'bottom', 'left'] ଆରେ (ପସନ୍ଦ କ୍ରମରେ) ପ୍ଲେସମେଣ୍ଟଗୁଡିକର ଏକ ତାଲିକା ପ୍ରଦାନ କରି ଫଲବ୍ୟାକ୍ ପ୍ଲେସମେଣ୍ଟଗୁଡ଼ିକୁ ବ୍ୟାଖ୍ୟା କରନ୍ତୁ | ଅଧିକ ସୂଚନା ପାଇଁ ପପର୍ଙ୍କ ଆଚରଣ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ |
boundary string | ଉପାଦାନ 'clippingParents' ଟୁଲ୍ ଟିପ୍ ର ଓଭରଫ୍ଲୋ ସୀମାବଦ୍ଧ ସୀମା (କେବଳ ପପର୍ ର ପ୍ରତିରୋଧ ଓଭରଫ୍ଲୋ ମୋଡିଫାୟର୍ ପାଇଁ ପ୍ରଯୁଜ୍ୟ) | ଡିଫଲ୍ଟ ଭାବରେ ଏହା 'clippingParents'ଏବଂ ଏକ HTMLElement ରେଫରେନ୍ସ ଗ୍ରହଣ କରିପାରିବ (କେବଳ ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ) | ଅଧିକ ସୂଚନା ପାଇଁ ପପରର ଡିଟେକ୍ଟ ଓଭରଫ୍ଲୋ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ |
customClass string | କାର୍ଯ୍ୟ ''

ଯେତେବେଳେ ଏହା ଦେଖାଯାଏ ଟୁଲ୍ ଟିପ୍ ରେ କ୍ଲାସ୍ ଯୋଡନ୍ତୁ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଟେମ୍ପଲେଟରେ ନିର୍ଦ୍ଦିଷ୍ଟ ଯେକ classes ଣସି ଶ୍ରେଣୀ ସହିତ ଏହି ଶ୍ରେଣୀଗୁଡ଼ିକ ଯୋଗ କରାଯିବ | ଏକାଧିକ ଶ୍ରେଣୀ ଯୋଡିବାକୁ, ସେମାନଙ୍କୁ ସ୍ପେସ୍ ସହିତ ଅଲଗା କରନ୍ତୁ : 'class-1 class-2'

ଆପଣ ଏକ ଫଙ୍କସନ୍ ମଧ୍ୟ ପାସ୍ କରିପାରିବେ ଯାହା ଅତିରିକ୍ତ ଶ୍ରେଣୀ ନାମ ଧାରଣ କରିଥିବା ଗୋଟିଏ ଷ୍ଟ୍ରିଙ୍ଗକୁ ଫେରାଇବା ଉଚିତ |

sanitize ବୁଲିଅନ୍ true ପରିମଳକରଣକୁ ସକ୍ଷମ କିମ୍ବା ଅକ୍ଷମ କରନ୍ତୁ | ଯଦି ସକ୍ରିୟ 'template'ଏବଂ 'title'ବିକଳ୍ପଗୁଡ଼ିକ ପରିମଳ ହେବ | ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ରେ ସାନିଟାଇଜର୍ ବିଭାଗ ଦେଖନ୍ତୁ |
allowList ବସ୍ତୁ ଡିଫଲ୍ଟ ମୂଲ୍ୟ ଅବଜେକ୍ଟ ଯାହା ଅନୁମତିପ୍ରାପ୍ତ ଗୁଣ ଏବଂ ଟ୍ୟାଗ୍ ଧାରଣ କରେ |
sanitizeFn null | କାର୍ଯ୍ୟ null ଏଠାରେ ଆପଣ ନିଜର ସାନିଟାଇଜ୍ ଫଙ୍କସନ୍ ଯୋଗାଇ ପାରିବେ | ସାନିଟାଇଜେସନ୍ କରିବା ପାଇଁ ଯଦି ଆପଣ ଏକ ଉତ୍ସର୍ଗୀକୃତ ଲାଇବ୍ରେରୀ ବ୍ୟବହାର କରିବାକୁ ପସନ୍ଦ କରନ୍ତି ତେବେ ଏହା ଉପଯୋଗୀ ହୋଇପାରେ |
offset ଆରେ | string | କାର୍ଯ୍ୟ [0, 0]

ଏହାର ଲକ୍ଷ୍ୟ ସହିତ ଟୁଲ୍ ଟିପ୍ ର ଅଫସେଟ୍ | ଆପଣ କମା ଦ୍ୱାରା ପୃଥକ ମୂଲ୍ୟ ସହିତ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ରେ ଏକ ଷ୍ଟ୍ରିଙ୍ଗ୍ ପାସ୍ କରିପାରିବେ:data-bs-offset="10,20"

ଯେତେବେଳେ ଅଫସେଟ୍ ନିର୍ଣ୍ଣୟ କରିବା ପାଇଁ ଏକ ଫଙ୍କସନ୍ ବ୍ୟବହୃତ ହୁଏ, ଏହାକୁ ପ୍ରଥମ ଯୁକ୍ତି ଭାବରେ ପପର୍ ପ୍ଲେସମେଣ୍ଟ୍, ରେଫରେନ୍ସ ଏବଂ ପପର୍ ରେକ୍ଟସ୍ ଧାରଣ କରିଥିବା ଏକ ବସ୍ତୁ ସହିତ କୁହାଯାଏ | ଟ୍ରାଇଜିଂ ଉପାଦାନ DOM ନୋଡ୍ ଦ୍ୱିତୀୟ ଆର୍ଗୁମେଣ୍ଟ୍ ଭାବରେ ପାସ୍ ହୋଇଛି | ଫଙ୍କସନ୍ ନିଶ୍ଚିତ ଭାବରେ ଦୁଇଟି ସଂଖ୍ୟା ସହିତ ଏକ ଆରେ ଫେରସ୍ତ କରିବ :[skidding, distance]

ଅଧିକ ସୂଚନା ପାଇଁ ପପର୍ ର ଅଫସେଟ୍ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ |

popperConfig null | ବସ୍ତୁ | କାର୍ଯ୍ୟ null

ବୁଟଷ୍ଟ୍ରାପ୍ ର ଡିଫଲ୍ଟ ପପର୍ କନଫିଗ୍ ପରିବର୍ତ୍ତନ କରିବାକୁ, ପପର୍ ର ବିନ୍ୟାସ ଦେଖନ୍ତୁ |

ଯେତେବେଳେ ପପର୍ ବିନ୍ୟାସକରଣ ସୃଷ୍ଟି କରିବାକୁ ଏକ ଫଙ୍କସନ୍ ବ୍ୟବହୃତ ହୁଏ, ଏହାକୁ ଏକ ଅବଜେକ୍ଟ ସହିତ କୁହାଯାଏ ଯାହା ବୁଟଷ୍ଟ୍ରାପ୍ ର ଡିଫଲ୍ଟ ପପର୍ ବିନ୍ୟାସକରଣ ଧାରଣ କରିଥାଏ | ଏହା ଆପଣଙ୍କୁ ନିଜ ବିନ୍ୟାସ ସହିତ ଡିଫଲ୍ଟ ବ୍ୟବହାର ଏବଂ ମିଶ୍ରଣ କରିବାରେ ସାହାଯ୍ୟ କରେ | ଫଙ୍କସନ୍ ନିଶ୍ଚିତ ଭାବରେ ପପର୍ ପାଇଁ ଏକ ବିନ୍ୟାସ ବସ୍ତୁ ଫେରସ୍ତ କରିବ |

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

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

ସହିତ ଫଙ୍କସନ୍ ବ୍ୟବହାର କରିବା |popperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

ପ୍ରଣାଳୀ

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

ସମସ୍ତ API ପଦ୍ଧତିଗୁଡିକ ଅସନ୍ତୁଳିତ ଏବଂ ଏକ ପରିବର୍ତ୍ତନ ଆରମ୍ଭ କରନ୍ତି | ସଂକ୍ରମଣ ଆରମ୍ଭ ହେବା ମାତ୍ରେ ସେମାନେ କଲର୍ ନିକଟକୁ ଫେରିଯାଆନ୍ତି କିନ୍ତୁ ଏହା ଶେଷ ହେବା ପୂର୍ବରୁ | ଏହା ସହିତ, ଏକ ପରିବର୍ତ୍ତନକାରୀ ଉପାଦାନ ଉପରେ ଏକ ପଦ୍ଧତି କଲ୍ କୁ ଅଣଦେଖା କରାଯିବ |

ଅଧିକ ସୂଚନା ପାଇଁ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଦେଖନ୍ତୁ |

ଦେଖାନ୍ତୁ |

ଏକ ଉପାଦାନର ଟୁଲଟିପ୍ ପ୍ରକାଶ କରେ | ଟୁଲ୍ ଟିପ୍ ପ୍ରକୃତରେ ଦେଖାଯିବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ shown.bs.tooltipଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ | ଏହା ଟୁଲ୍ ଟିପ୍ ର ଏକ “ମାନୁଆଲ୍” ଟ୍ରିଗରିଂ ଭାବରେ ବିବେଚନା କରାଯାଏ | ଶୂନ-ଲମ୍ବ ଶିରୋନାମା ସହିତ ଟୁଲ୍ ଟିପ୍ସ କଦାପି ପ୍ରଦର୍ଶିତ ହୁଏ ନାହିଁ |

tooltip.show()

ଲୁଚାନ୍ତୁ |

ଏକ ଉପାଦାନର ଟୁଲ୍ ଟିପ୍ ଲୁଚାଏ | ଟୁଲ୍ ଟିପ୍ ପ୍ରକୃତରେ ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ hidden.bs.tooltipଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଯାଏ | ଏହା ଟୁଲ୍ ଟିପ୍ ର ଏକ “ମାନୁଆଲ୍” ଟ୍ରିଗରିଂ ଭାବରେ ବିବେଚନା କରାଯାଏ |

tooltip.hide()

ଟୋଗଲ୍ କରନ୍ତୁ |

ଏକ ଉପାଦାନର ଟୁଲ୍ ଟିପ୍ ଟୋଗଲ୍ କରେ | ଟୁଲ୍ ଟିପ୍ ପ୍ରକୃତରେ ଦେଖାଯିବା କିମ୍ବା ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ ଘଟଣା କିମ୍ବା ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ | ଏହା ଟୁଲ୍ ଟିପ୍ ର ଏକ “ମାନୁଆଲ୍” ଟ୍ରିଗରିଂ ଭାବରେ ବିବେଚନା କରାଯାଏ |shown.bs.tooltiphidden.bs.tooltip

tooltip.toggle()

ନିଷ୍କାସନ କରନ୍ତୁ |

ଏକ ଉପାଦାନର ଟୁଲ୍ ଟିପ୍ ଲୁଚାଇଥାଏ ଏବଂ ନଷ୍ଟ କରିଥାଏ (DOM ଉପାଦାନରେ ସଂରକ୍ଷିତ ତଥ୍ୟ ଅପସାରଣ କରେ) | ପ୍ରତିନିଧୀ ବ୍ୟବହାର କରୁଥିବା ସାଧନଗୁଡ଼ିକ (ଯାହା ବିକଳ୍ପ ବ୍ୟବହାର କରିselector ସୃଷ୍ଟି ହୋଇଥାଏ ) ବଂଶଧର ଟ୍ରିଗର ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ପୃଥକ ଭାବରେ ନଷ୍ଟ ହୋଇପାରିବ ନାହିଁ |

tooltip.dispose()

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

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

tooltip.enable()

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

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

tooltip.disable()

ଟୋଗଲ୍ ସକ୍ଷମ |

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

tooltip.toggleEnabled()

ଅଦ୍ୟତନ କରନ୍ତୁ |

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

tooltip.update()

getInstance

ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ଟୁଲ୍ ଟିପ୍ ଇନଷ୍ଟାଣ୍ଟ ପାଇବାକୁ ଅନୁମତି ଦିଏ |

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ଟୁଲଟିପ୍ ଇନଷ୍ଟାଣ୍ଟ ପାଇବାକୁ ଅନୁମତି ଦିଏ, କିମ୍ବା ଏହା ପ୍ରାରମ୍ଭ ହୋଇନଥିଲେ ଏକ ନୂତନ ସୃଷ୍ଟି କରିବାକୁ ଅନୁମତି ଦିଏ |

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

ଘଟଣା

ଇଭେଣ୍ଟ ପ୍ରକାର | ବର୍ଣ୍ଣନା
show.bs.tooltip showଉଦାହରଣ ପଦ୍ଧତି ଡାକିବା ପରେ ଏହି ଘଟଣା ତୁରନ୍ତ ନିଆଁ ଲାଗେ |
shown.bs.tooltip ଟୁଲ୍ ଟିପ୍ ଉପଭୋକ୍ତାଙ୍କୁ ଦୃଶ୍ୟମାନ ହେବାପରେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଇଥାଏ (CSS ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) |
hide.bs.tooltip hideଉଦାହରଣ ପଦ୍ଧତି ଡକାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟ ତୁରନ୍ତ ବରଖାସ୍ତ ହୁଏ |
hidden.bs.tooltip ଟୁଲ୍ ଟିପ୍ ବ୍ୟବହାରକାରୀଙ୍କଠାରୁ ଲୁକ୍କାୟିତ ହେବା ପରେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଇଥାଏ (CSS ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) |
inserted.bs.tooltip show.bs.tooltipଟୁଲ୍ ଟିପ୍ ଟେମ୍ପଲେଟ୍ DOM ରେ ଯୋଡାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()