ସାଧନଗୁଡ଼ିକ

ସମୀକ୍ଷା

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

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

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

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

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

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

ମାର୍କଅପ୍ |

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

<!-- 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"|

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

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

ପ୍ରଣାଳୀ

ଦେଖାନ୍ତୁ |

ଏକ ଉପାଦାନର ଟୁଲଟିପ୍ ପ୍ରକାଶ କରେ | ଟୁଲ୍ ଟିପ୍ ପ୍ରକୃତରେ ଦେଖାଯିବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ 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

ଘଟଣା

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()