ସାଧନଗୁଡ଼ିକ
ଆନିମେସନ୍ ପାଇଁ CSS3 ବ୍ୟବହାର କରି CSS ଏବଂ ଜାଭାସ୍କ୍ରିପ୍ଟ ସହିତ କଷ୍ଟମ୍ ବୁଟ୍ଷ୍ଟ୍ରାପ୍ ଟୁଲ୍ ଟିପ୍ସ ଯୋଡିବା ପାଇଁ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ଉଦାହରଣ |
ସମୀକ୍ଷା
ଟୁଲ୍ ଟିପ୍ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରିବା ସମୟରେ ଜାଣିବାକୁ ଥିବା ଜିନିଷଗୁଡିକ:
- ଟୁଲ୍ ଟିପ୍ସ ପୋଜିସନ୍ ପାଇଁ ତୃତୀୟ ପକ୍ଷ ଲାଇବ୍ରେରୀ ପପର୍ ଉପରେ ନିର୍ଭର କରେ | Bootstrap.js ପୂର୍ବରୁ ଆପଣ popper.min.js ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଉଚିତ କିମ୍ବା ଟୁଲ୍ ଟିପ୍ସ କାମ କରିବା ପାଇଁ ପପର୍ ଧାରଣ କରିଥିବା ବ୍ୟବହାର
bootstrap.bundle.min.js
/ ବ୍ୟବହାର କରିବା ଜରୁରୀ!bootstrap.bundle.js
- କାର୍ଯ୍ୟଦକ୍ଷତା କାରଣରୁ ଟୁଲ୍ ଟିପ୍ସ ଅପ୍ଟ-ଇନ୍ ଅଟେ, ତେଣୁ ଆପଣ ସେଗୁଡିକୁ ନିଜେ ଆରମ୍ଭ କରିବା ଜରୁରୀ |
- ଶୂନ-ଲମ୍ବ ଶିରୋନାମା ସହିତ ଟୁଲ୍ ଟିପ୍ସ କଦାପି ପ୍ରଦର୍ଶିତ ହୁଏ ନାହିଁ |
container: 'body'
ଅଧିକ ଜଟିଳ ଉପାଦାନଗୁଡ଼ିକରେ ସମସ୍ୟା ସୃଷ୍ଟି ନକରିବାକୁ ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ (ଯେପରିକି ଆମର ଇନପୁଟ୍ ଗୋଷ୍ଠୀ, ବଟନ୍ ଗୋଷ୍ଠୀ, ଇତ୍ୟାଦି) |- ଲୁକ୍କାୟିତ ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ଟୁଲ୍ ଟିପ୍ସ କାମ କରିବ ନାହିଁ |
- ଏକ ରାପର୍ ଉପାଦାନ ଉପରେ ଟୁଲ୍ ଟିପ୍ସ
.disabled
କିମ୍ବାdisabled
ଉପାଦାନଗୁଡ଼ିକ ଟ୍ରିଗର ହେବା ଜରୁରୀ | - ଯେତେବେଳେ ହାଇପରଲିଙ୍କ୍ସରୁ ଟ୍ରିଗର୍ ହୁଏ ଯାହା ଏକାଧିକ ଲାଇନ୍ ବିସ୍ତାର କରେ, ଟୁଲ୍ ଟିପ୍ସ କେନ୍ଦ୍ରୀଭୂତ ହେବ | ଏହି ଆଚରଣକୁ ଏଡାଇବା ପାଇଁ
white-space: nowrap;
ଆପଣଙ୍କ ଉପରେ ବ୍ୟବହାର କରନ୍ତୁ |<a>
- ସେମାନଙ୍କର ଅନୁରୂପ ଉପାଦାନଗୁଡିକ DOM ରୁ ଅପସାରିତ ହେବା ପୂର୍ବରୁ ଟୁଲ୍ ଟିପ୍ସ ଲୁକ୍କାୟିତ ହେବା ଜରୁରୀ |
- ଏକ ଛାୟା DOM ଭିତରେ ଥିବା ଏକ ଉପାଦାନ ଯୋଗୁଁ ଟୁଲଟିପ୍ ଟ୍ରିଗର ହୋଇପାରେ |
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
ଗୁଣ ଏବଂ title
HTML ଉପାଦାନରେ ଆପଣ ଏକ ଟୁଲ୍ ଟିପ୍ ପାଇବାକୁ ଚାହୁଁଛନ୍ତି | ଏକ ଟୁଲ୍ ଟିପ୍ ର ଉତ୍ପାଦିତ ମାର୍କଅପ୍ ବହୁତ ସରଳ, ଯଦିଓ ଏହା ଏକ ଅବସ୍ଥାନ ଆବଶ୍ୟକ କରେ (ଡିଫଲ୍ଟ ଭାବରେ, 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 |
ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଉପାଦାନରେ ଟୁଲ୍ ଟିପ୍ ଯୋଡେ | ଉଦାହରଣ : |
delay |
ସଂଖ୍ୟା | ବସ୍ତୁ | 0 |
ଟୁଲ୍ ଟିପ୍ (ms) ଦେଖାଇବା ଏବଂ ଲୁଚାଇବାରେ ବିଳମ୍ବ - ମାନୁଆଲ୍ ଟ୍ରିଗର ପ୍ରକାର ପାଇଁ ପ୍ରଯୁଜ୍ୟ ନୁହେଁ | ଯଦି ଏକ ସଂଖ୍ୟା ଯୋଗାଇ ଦିଆଯାଏ, ଉଭୟ ଲୁଚାଇବା / ଶୋ ପାଇଁ ବିଳମ୍ବ ପ୍ରୟୋଗ କରାଯାଏ | ବସ୍ତୁ ଗଠନ ହେଉଛି: |
html |
ବୁଲିଅନ୍ | false |
ଟୁଲ୍ ଟିପ୍ ରେ HTML କୁ ଅନୁମତି ଦିଅନ୍ତୁ | ଯଦି ସତ, ଟୁଲ୍ ଟିପ୍ ରେ HTML ଟ୍ୟାଗ୍ ଟୁଲ୍ ଟିପ୍ ଯଦି ଆପଣ XSS ଆକ୍ରମଣ ବିଷୟରେ ଚିନ୍ତିତ ତେବେ ପାଠ ବ୍ୟବହାର କରନ୍ତୁ | |
placement |
string | କାର୍ଯ୍ୟ | 'top' |
ଟୁଲ୍ ଟିପ୍ - ଅଟୋ | ଶୀର୍ଷ | ତଳ | ବାମ | ଠିକ୍ ଯେତେବେଳେ ପ୍ଲେସମେଣ୍ଟ ନିର୍ଣ୍ଣୟ କରିବା ପାଇଁ ଏକ ଫଙ୍କସନ୍ ବ୍ୟବହୃତ ହୁଏ, ଏହାକୁ ଟୁଲଟିପ୍ DOM ନୋଡ୍ ସହିତ ଏହାର ପ୍ରଥମ ଆର୍ଗୁମେଣ୍ଟ୍ ଏବଂ ଟ୍ରାଇଜିଂ ଉପାଦାନ DOM ନୋଡ୍ ଦ୍ second ିତୀୟ ଭାବରେ କୁହାଯାଏ | |
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 |
string | ଉପାଦାନ | କାର୍ଯ୍ୟ | '' |
|
trigger |
ଷ୍ଟ୍ରିଙ୍ଗ୍ | 'hover focus' |
ଟୁଲ୍ ଟିପ୍ କିପରି ଟ୍ରିଗର ହୁଏ - କ୍ଲିକ୍ କରନ୍ତୁ | ହୋଭର | ଧ୍ୟାନ | ମାନୁଆଲ୍ | ଆପଣ ଏକାଧିକ ଟ୍ରିଗର ପାସ୍ କରିପାରନ୍ତି; ସେମାନଙ୍କୁ ଏକ ସ୍ପେସ୍ ସହିତ ଅଲଗା କର |
|
fallbackPlacements |
ଆରେ | ['top', 'right', 'bottom', 'left'] |
ଆରେ (ପସନ୍ଦ କ୍ରମରେ) ପ୍ଲେସମେଣ୍ଟଗୁଡିକର ଏକ ତାଲିକା ପ୍ରଦାନ କରି ଫଲବ୍ୟାକ୍ ପ୍ଲେସମେଣ୍ଟଗୁଡ଼ିକୁ ବ୍ୟାଖ୍ୟା କରନ୍ତୁ | ଅଧିକ ସୂଚନା ପାଇଁ ପପର୍ଙ୍କ ଆଚରଣ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ | |
boundary |
string | ଉପାଦାନ | 'clippingParents' |
ଟୁଲ୍ ଟିପ୍ ର ଓଭରଫ୍ଲୋ ସୀମାବଦ୍ଧ ସୀମା (କେବଳ ପପର୍ ର ପ୍ରତିରୋଧ ଓଭରଫ୍ଲୋ ମୋଡିଫାୟର୍ ପାଇଁ ପ୍ରଯୁଜ୍ୟ) | ଡିଫଲ୍ଟ ଭାବରେ ଏହା 'clippingParents' ଏବଂ ଏକ HTMLElement ରେଫରେନ୍ସ ଗ୍ରହଣ କରିପାରିବ (କେବଳ ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ) | ଅଧିକ ସୂଚନା ପାଇଁ ପପରର ଡିଟେକ୍ଟ ଓଭରଫ୍ଲୋ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ | |
customClass |
string | କାର୍ଯ୍ୟ | '' |
ଯେତେବେଳେ ଏହା ଦେଖାଯାଏ ଟୁଲ୍ ଟିପ୍ ରେ କ୍ଲାସ୍ ଯୋଡନ୍ତୁ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଟେମ୍ପଲେଟରେ ନିର୍ଦ୍ଦିଷ୍ଟ ଯେକ classes ଣସି ଶ୍ରେଣୀ ସହିତ ଏହି ଶ୍ରେଣୀଗୁଡ଼ିକ ଯୋଗ କରାଯିବ | ଏକାଧିକ ଶ୍ରେଣୀ ଯୋଡିବାକୁ, ସେମାନଙ୍କୁ ସ୍ପେସ୍ ସହିତ ଅଲଗା କରନ୍ତୁ : ଆପଣ ଏକ ଫଙ୍କସନ୍ ମଧ୍ୟ ପାସ୍ କରିପାରିବେ ଯାହା ଅତିରିକ୍ତ ଶ୍ରେଣୀ ନାମ ଧାରଣ କରିଥିବା ଗୋଟିଏ ଷ୍ଟ୍ରିଙ୍ଗକୁ ଫେରାଇବା ଉଚିତ | |
sanitize |
ବୁଲିଅନ୍ | true |
ପରିମଳକରଣକୁ ସକ୍ଷମ କିମ୍ବା ଅକ୍ଷମ କରନ୍ତୁ | ଯଦି ସକ୍ରିୟ 'template' ଏବଂ 'title' ବିକଳ୍ପଗୁଡ଼ିକ ପରିମଳ ହେବ | ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ରେ ସାନିଟାଇଜର୍ ବିଭାଗ ଦେଖନ୍ତୁ | |
allowList |
ବସ୍ତୁ | ଡିଫଲ୍ଟ ମୂଲ୍ୟ | ଅବଜେକ୍ଟ ଯାହା ଅନୁମତିପ୍ରାପ୍ତ ଗୁଣ ଏବଂ ଟ୍ୟାଗ୍ ଧାରଣ କରେ | |
sanitizeFn |
null | କାର୍ଯ୍ୟ | null |
ଏଠାରେ ଆପଣ ନିଜର ସାନିଟାଇଜ୍ ଫଙ୍କସନ୍ ଯୋଗାଇ ପାରିବେ | ସାନିଟାଇଜେସନ୍ କରିବା ପାଇଁ ଯଦି ଆପଣ ଏକ ଉତ୍ସର୍ଗୀକୃତ ଲାଇବ୍ରେରୀ ବ୍ୟବହାର କରିବାକୁ ପସନ୍ଦ କରନ୍ତି ତେବେ ଏହା ଉପଯୋଗୀ ହୋଇପାରେ | |
offset |
ଆରେ | string | କାର୍ଯ୍ୟ | [0, 0] |
ଏହାର ଲକ୍ଷ୍ୟ ସହିତ ଟୁଲ୍ ଟିପ୍ ର ଅଫସେଟ୍ | ଆପଣ କମା ଦ୍ୱାରା ପୃଥକ ମୂଲ୍ୟ ସହିତ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ରେ ଏକ ଷ୍ଟ୍ରିଙ୍ଗ୍ ପାସ୍ କରିପାରିବେ: ଯେତେବେଳେ ଅଫସେଟ୍ ନିର୍ଣ୍ଣୟ କରିବା ପାଇଁ ଏକ ଫଙ୍କସନ୍ ବ୍ୟବହୃତ ହୁଏ, ଏହାକୁ ପ୍ରଥମ ଯୁକ୍ତି ଭାବରେ ପପର୍ ପ୍ଲେସମେଣ୍ଟ୍, ରେଫରେନ୍ସ ଏବଂ ପପର୍ ରେକ୍ଟସ୍ ଧାରଣ କରିଥିବା ଏକ ବସ୍ତୁ ସହିତ କୁହାଯାଏ | ଟ୍ରାଇଜିଂ ଉପାଦାନ DOM ନୋଡ୍ ଦ୍ୱିତୀୟ ଆର୍ଗୁମେଣ୍ଟ୍ ଭାବରେ ପାସ୍ ହୋଇଛି | ଫଙ୍କସନ୍ ନିଶ୍ଚିତ ଭାବରେ ଦୁଇଟି ସଂଖ୍ୟା ସହିତ ଏକ ଆରେ ଫେରସ୍ତ କରିବ : ଅଧିକ ସୂଚନା ପାଇଁ ପପର୍ ର ଅଫସେଟ୍ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ | |
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.tooltip
hidden.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()