ସାଧନଗୁଡ଼ିକ
CSS3 ଏବଂ ଜାଭାସ୍କ୍ରିପ୍ଟ ସହିତ CSS3 ବ୍ୟବହାର କରି କଷ୍ଟମ୍ ବୁଟ୍ଷ୍ଟ୍ରାପ୍ ଟୁଲ୍ ଟିପ୍ସ ଯୋଡିବା ପାଇଁ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ଉଦାହରଣ |
ସମୀକ୍ଷା
ଟୁଲ୍ ଟିପ୍ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରିବା ସମୟରେ ଜାଣିବାକୁ ଥିବା ଜିନିଷଗୁଡିକ:
- ଟୁଲ୍ ଟିପ୍ସ ପୋଜିସନ୍ ପାଇଁ ତୃତୀୟ ପକ୍ଷ ଲାଇବ୍ରେରୀ ପପର୍ ଉପରେ ନିର୍ଭର କରେ | Bootstrap.js ପୂର୍ବରୁ ଆପଣ popper.min.js ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଉଚିତ କିମ୍ବା ଟୁଲ୍ ଟିପ୍ସ କାମ କରିବା ପାଇଁ ପପର୍ ଧାରଣ କରିଥିବା ବ୍ୟବହାର
bootstrap.bundle.min.js
/ ବ୍ୟବହାର କରିବା ଜରୁରୀ!bootstrap.bundle.js
- ଯଦି ଆପଣ ଉତ୍ସରୁ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ନିର୍ମାଣ କରୁଛନ୍ତି, ଏହା ଆବଶ୍ୟକ କରେ
util.js
| - କାର୍ଯ୍ୟଦକ୍ଷତା କାରଣରୁ ଟୁଲ୍ ଟିପ୍ସ ଅପ୍ଟ-ଇନ୍ ଅଟେ, ତେଣୁ ଆପଣ ସେଗୁଡିକୁ ନିଜେ ଆରମ୍ଭ କରିବା ଜରୁରୀ |
- ଶୂନ-ଲମ୍ବ ଶିରୋନାମା ସହିତ ଟୁଲ୍ ଟିପ୍ସ କଦାପି ପ୍ରଦର୍ଶିତ ହୁଏ ନାହିଁ |
container: 'body'
ଅଧିକ ଜଟିଳ ଉପାଦାନଗୁଡ଼ିକରେ ସମସ୍ୟା ସୃଷ୍ଟି ନକରିବାକୁ ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ (ଯେପରିକି ଆମର ଇନପୁଟ୍ ଗୋଷ୍ଠୀ, ବଟନ୍ ଗୋଷ୍ଠୀ, ଇତ୍ୟାଦି) |- ଲୁକ୍କାୟିତ ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ଟୁଲ୍ ଟିପ୍ସ କାମ କରିବ ନାହିଁ |
- ଏକ ରାପର୍ ଉପାଦାନ ଉପରେ ଟୁଲ୍ ଟିପ୍ସ
.disabled
କିମ୍ବାdisabled
ଉପାଦାନଗୁଡ଼ିକ ଟ୍ରିଗର ହେବା ଜରୁରୀ | - ଯେତେବେଳେ ହାଇପରଲିଙ୍କ୍ସରୁ ଟ୍ରିଗର୍ ହୁଏ ଯାହା ଏକାଧିକ ଲାଇନ୍ ବିସ୍ତାର କରେ, ଟୁଲ୍ ଟିପ୍ସ କେନ୍ଦ୍ରୀଭୂତ ହେବ | ଏହି ଆଚରଣକୁ ଏଡାଇବା ପାଇଁ
white-space: nowrap;
ଆପଣଙ୍କ ଉପରେ ବ୍ୟବହାର କରନ୍ତୁ |<a>
- ସେମାନଙ୍କର ଅନୁରୂପ ଉପାଦାନଗୁଡିକ DOM ରୁ ଅପସାରିତ ହେବା ପୂର୍ବରୁ ଟୁଲ୍ ଟିପ୍ସ ଲୁକ୍କାୟିତ ହେବା ଜରୁରୀ |
- ଏକ ଛାୟା DOM ଭିତରେ ଥିବା ଏକ ଉପାଦାନ ଯୋଗୁଁ ଟୁଲଟିପ୍ ଟ୍ରିଗର ହୋଇପାରେ |
prefers-reduced-motion
ମିଡିଆ ଜିଜ୍ଞାସା ଉପରେ ନିର୍ଭରଶୀଳ | ଆମର ଆକ୍ସେସିବିଲିଟି ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ର ହ୍ରାସ ହୋଇଥିବା ଗତି ବିଭାଗ ଦେଖନ୍ତୁ
|
ସେ ସବୁ ପାଇଛନ୍ତି କି? ଉତ୍ତମ, ଆସନ୍ତୁ ଦେଖିବା ସେମାନେ କିପରି କିଛି ଉଦାହରଣ ସହିତ କାମ କରନ୍ତି |
ଉଦାହରଣ: ସର୍ବତ୍ର ଟୁଲ୍ ଟିପ୍ସ ସକ୍ଷମ କର |
ଏକ ପୃଷ୍ଠାରେ ସମସ୍ତ ଟୁଲ୍ ଟିପ୍ସ ଆରମ୍ଭ କରିବାର ଗୋଟିଏ ଉପାୟ ହେଉଛି ସେମାନଙ୍କର data-toggle
ଗୁଣ ଅନୁଯାୟୀ ସେମାନଙ୍କୁ ବାଛିବା:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
ଉଦାହରଣଗୁଡିକ
ଟୁଲ୍ ଟିପ୍ସ ଦେଖିବାକୁ ନିମ୍ନ ଲିଙ୍କଗୁଡିକ ଉପରେ ଚଲାନ୍ତୁ:
ଟୁଲ୍ ଟିପ୍ସ ସହିତ କିଛି ଇନଲାଇନ୍ ଲିଙ୍କ୍ ପ୍ରଦର୍ଶନ କରିବାକୁ ପ୍ଲେସହୋଲ୍ଡର୍ ଟେକ୍ସଟ୍ | ଏହା ବର୍ତ୍ତମାନ କେବଳ ଫିଲର୍, ହତ୍ୟାକାରୀ ନୁହେଁ | ପ୍ରକୃତ ପାଠ୍ୟର ଉପସ୍ଥିତିକୁ ଅନୁକରଣ କରିବା ପାଇଁ ବିଷୟବସ୍ତୁ ଏଠାରେ ରଖାଯାଇଛି | ବାସ୍ତବ ଦୁନିଆ ପରିସ୍ଥିତିରେ ବ୍ୟବହୃତ ହେଲେ ଟୁଲ୍ ଟିପ୍ସ କିପରି ଦେଖାଯିବ ସେ ବିଷୟରେ କେବଳ ଏକ ଧାରଣା ଦେବା ପାଇଁ | ତେଣୁ ଆଶାକରେ ଆପଣ ବର୍ତ୍ତମାନ ଦେଖିଥିବେ ଲିଙ୍କଗୁଡ଼ିକରେ ଥିବା ଏହି ଟୁଲ୍ ଟିପ୍ସ ଅଭ୍ୟାସରେ କିପରି କାର୍ଯ୍ୟ କରିପାରିବ, ଥରେ ଆପଣ ଏହାକୁ ନିଜ ସାଇଟ୍ କିମ୍ବା ପ୍ରୋଜେକ୍ଟରେ ବ୍ୟବହାର କଲେ |
ଚାରୋଟି ଟୁଲ୍ ଟିପ୍ସ ଦିଗ ଦେଖିବା ପାଇଁ ନିମ୍ନରେ ଥିବା ବଟନ୍ ଉପରେ ଚଲାନ୍ତୁ: ଉପର, ଡାହାଣ, ତଳ ଏବଂ ବାମ |
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
ଏବଂ କଷ୍ଟମ୍ HTML ସହିତ ଯୋଡା ଯାଇଛି:
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
ବ୍ୟବହାର
ଟୁଲ୍ ଟିପ୍ ପ୍ଲଗଇନ୍ ଚାହିଦା ଅନୁଯାୟୀ ବିଷୟବସ୍ତୁ ଏବଂ ମାର୍କଅପ୍ ସୃଷ୍ଟି କରେ ଏବଂ ଡିଫଲ୍ଟ ଭାବରେ ସେମାନଙ୍କ ଟ୍ରିଗର ଉପାଦାନ ପରେ ଟୁଲଟିପ୍ ସ୍ଥାନିତ କରେ |
ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଟୁଲ୍ ଟିପ୍ ଟ୍ରିଗର୍ କରନ୍ତୁ:
$('#example').tooltip(options)
ଓଭରଫ୍ଲୋ auto
ଏବଂscroll
ଟୁଲଟିପ୍ ପୋଜିସନ୍ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ପରିବର୍ତ୍ତନ କରିବାକୁ ଚେଷ୍ଟା କରେ ଯେତେବେଳେ ଏକ ପ୍ୟାରେଣ୍ଟ୍ କଣ୍ଟେନର୍ ଆମ ପାଖରେ overflow: auto
କିମ୍ବା overflow: scroll
ପସନ୍ଦ କରେ .table-responsive
, କିନ୍ତୁ ତଥାପି ମୂଳ ପ୍ଲେସମେଣ୍ଟ୍ ର ପୋଜିସନ୍ ରଖେ | ସମାଧାନ କରିବାକୁ, boundary
ଡିଫଲ୍ଟ ମୂଲ୍ୟ ବ୍ୟତୀତ ଅନ୍ୟ କ anything ଣସି ଜିନିଷକୁ ବିକଳ୍ପ ସେଟ୍ କରନ୍ତୁ 'scrollParent'
, ଯେପରିକି 'window'
:
$('#example').tooltip({ boundary: 'window' })
ମାର୍କଅପ୍ |
ଏକ ଟୁଲ୍ ଟିପ୍ ପାଇଁ ଆବଶ୍ୟକ ମାର୍କଅପ୍ କେବଳ ଏକ data
ଗୁଣ ଏବଂ title
HTML ଉପାଦାନରେ ଆପଣ ଏକ ଟୁଲ୍ ଟିପ୍ ପାଇବାକୁ ଚାହୁଁଛନ୍ତି | ଏକ ଟୁଲ୍ ଟିପ୍ ର ଉତ୍ପାଦିତ ମାର୍କଅପ୍ ବହୁତ ସରଳ, ଯଦିଓ ଏହା ଏକ ଅବସ୍ଥାନ ଆବଶ୍ୟକ କରେ (ଡିଫଲ୍ଟ ଭାବରେ, top
ପ୍ଲଗଇନ୍ ଦ୍ୱାରା ସେଟ୍) |
କୀବୋର୍ଡ୍ ଏବଂ ସହାୟକ ଟେକ୍ନୋଲୋଜି ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ଟୁଲ୍ ଟିପ୍ସ ତିଆରି କରିବା |
ଆପଣ କେବଳ HTML ଉପାଦାନଗୁଡ଼ିକରେ ଟୁଲ୍ ଟିପ୍ସ ଯୋଡିବା ଉଚିତ ଯାହା ପାରମ୍ପାରିକ ଭାବରେ କୀବୋର୍ଡ୍-ଫୋକସେବଲ୍ ଏବଂ ଇଣ୍ଟରାକ୍ଟିଭ୍ (ଯେପରିକି ଲିଙ୍କ୍ କିମ୍ବା ଫର୍ମ କଣ୍ଟ୍ରୋଲ୍) | ଯଦିଓ ଇଚ୍ଛାଧୀନ HTML ଉପାଦାନଗୁଡିକ (ଯେପରିକି <span>
s) ଗୁଣବତ୍ତା ଯୋଗକରି ଫୋକସେବଲ୍ ହୋଇପାରିବ tabindex="0"
, ଏହା କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ଅଣ-ଇଣ୍ଟରାକ୍ଟିଭ୍ ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ସମ୍ଭାବ୍ୟ ବିରକ୍ତିକର ଏବଂ ଦ୍ୱନ୍ଦ୍ୱପୂର୍ଣ୍ଣ ଟ୍ୟାବ୍ ଷ୍ଟପ୍ ଯୋଗ କରିବ ଏବଂ ଅଧିକାଂଶ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ବର୍ତ୍ତମାନ ଏହି ପରିସ୍ଥିତିରେ ଟୁଲ୍ ଟିପ୍ ଘୋଷଣା କରେ ନାହିଁ | ଅତିରିକ୍ତ ଭାବରେ, କେବଳ ଆପଣଙ୍କର ଟୁଲ୍ ଟିପ୍ ପାଇଁ ଟ୍ରିଗର ଭାବରେ ନିର୍ଭର କରନ୍ତୁ ନାହିଁ hover
, କାରଣ ଏହା ଆପଣଙ୍କର ଟୁଲ୍ ଟିପ୍ସକୁ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ଟ୍ରିଗର୍ କରିବା ଅସମ୍ଭବ କରିବ |
<!-- HTML to write -->
<a href="#" data-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="arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
ଅକ୍ଷମ ଉପାଦାନଗୁଡିକ |
ଆଟ୍ରିବ୍ୟୁଟ୍ ସହିତ ଉପାଦାନଗୁଡିକ disabled
ଇଣ୍ଟରାକ୍ଟିଭ୍ ନୁହେଁ, ଅର୍ଥାତ୍ ଉପଭୋକ୍ତାମାନେ ଏକ ଟୁଲ୍ ଟିପ୍ (କିମ୍ବା ପପ୍ ଓଭର) ଟ୍ରିଗର୍ କରିବାକୁ ଫୋକସ୍, ହୋଭର୍ କିମ୍ବା କ୍ଲିକ୍ କରିପାରିବେ ନାହିଁ | ଏକ ୱାର୍କଆଉଟ୍ ଭାବରେ, ଆପଣ ଏକ ରାପର୍ ରୁ ଟୁଲ୍ ଟିପ୍ ଟ୍ରିଗର୍ କରିବାକୁ <div>
କିମ୍ବା <span>
, ଆଦର୍ଶ ଭାବରେ କୀବୋର୍ଡ୍-ଫୋକସେବଲ୍ ବ୍ୟବହାର କରି , ଏବଂ ଅକ୍ଷମ ଉପାଦାନ ଉପରେ tabindex="0"
ନବଲିଖନ କରିବାକୁ ଚାହୁଁଥିବେ |pointer-events
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
ବିକଳ୍ପଗୁଡ଼ିକ
ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ସ ପାଇଁ, ଅପ୍ସନ୍ ନାମକୁ data-
ଯେପରି ଯୋଡନ୍ତୁ data-animation=""
|
sanitize
,
sanitizeFn
ଏବଂ
whiteList
ବିକଳ୍ପଗୁଡ଼ିକ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରି ଯୋଗାଇ ଦିଆଯାଇପାରିବ ନାହିଁ |
ନାମ | ଟାଇପ୍ କରନ୍ତୁ | | ଡିଫଲ୍ଟ | | ବର୍ଣ୍ଣନା |
---|---|---|---|
ଆନିମେସନ୍ | ବୁଲିଅନ୍ | ସତ | ଟୁଲ୍ ଟିପ୍ କୁ ଏକ CSS ଦୁର୍ବଳ ସ୍ଥାନାନ୍ତରଣ ପ୍ରୟୋଗ କରନ୍ତୁ | |
ପାତ୍ର | string | ଉପାଦାନ | ମିଥ୍ୟା | ମିଥ୍ୟା | ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଉପାଦାନରେ ଟୁଲ୍ ଟିପ୍ ଯୋଡେ | ଉଦାହରଣ : |
ବିଳମ୍ବ | ସଂଖ୍ୟା | ବସ୍ତୁ | 0 | ଟୁଲ୍ ଟିପ୍ (ms) ଦେଖାଇବା ଏବଂ ଲୁଚାଇବାରେ ବିଳମ୍ବ - ମାନୁଆଲ୍ ଟ୍ରିଗର ପ୍ରକାର ପାଇଁ ପ୍ରଯୁଜ୍ୟ ନୁହେଁ | ଯଦି ଏକ ସଂଖ୍ୟା ଯୋଗାଇ ଦିଆଯାଏ, ଉଭୟ ଲୁଚାଇବା / ଶୋ ପାଇଁ ବିଳମ୍ବ ପ୍ରୟୋଗ କରାଯାଏ | ବସ୍ତୁ ଗଠନ ହେଉଛି: |
html | ବୁଲିଅନ୍ | ମିଥ୍ୟା | ଟୁଲ୍ ଟିପ୍ ରେ HTML କୁ ଅନୁମତି ଦିଅନ୍ତୁ | ଯଦି ସତ, ଟୁଲ୍ ଟିପ୍ ରେ HTML ଟ୍ୟାଗ୍ ଟୁଲ୍ ଟିପ୍ ଯଦି ଆପଣ XSS ଆକ୍ରମଣ ବିଷୟରେ ଚିନ୍ତିତ ତେବେ ପାଠ ବ୍ୟବହାର କରନ୍ତୁ | |
ସ୍ଥାନ | string | କାର୍ଯ୍ୟ | 'ଶୀର୍ଷ' | ଟୁଲ୍ ଟିପ୍ - ଅଟୋ | ଶୀର୍ଷ | ତଳ | ବାମ | ଠିକ୍ ଯେତେବେଳେ ପ୍ଲେସମେଣ୍ଟ ନିର୍ଣ୍ଣୟ କରିବା ପାଇଁ ଏକ ଫଙ୍କସନ୍ ବ୍ୟବହୃତ ହୁଏ, ଏହାକୁ ଟୁଲ୍ ଟିପ୍ DOM ନୋଡ୍ ସହିତ ଏହାର ପ୍ରଥମ ଆର୍ଗୁମେଣ୍ଟ୍ ଏବଂ ଟ୍ରାଇଜିଂ ଉପାଦାନ DOM ନୋଡ୍ ଦ୍ second ିତୀୟ ଭାବରେ କୁହାଯାଏ | |
ଚୟନକର୍ତ୍ତା | | string | ମିଥ୍ୟା | ମିଥ୍ୟା | ଯଦି ଏକ ଚୟନକର୍ତ୍ତା ପ୍ରଦାନ କରାଯାଏ, ଟୁଲ୍ ଟିପ୍ ବସ୍ତୁଗୁଡିକ ନିର୍ଦ୍ଦିଷ୍ଟ ଲକ୍ଷ୍ୟସ୍ଥଳରେ ନ୍ୟସ୍ତ ହେବ | jQuery.on ଅଭ୍ୟାସରେ, ଏହା ଗତିଶୀଳ ଭାବରେ ଯୋଡିଥିବା DOM ଉପାଦାନଗୁଡିକ ( ସମର୍ଥନ) ରେ ଟୁଲ୍ ଟିପ୍ସ ପ୍ରୟୋଗ କରିବା ପାଇଁ ବ୍ୟବହୃତ ହୁଏ | ଏହାକୁ ଏବଂ ଏକ ସୂଚନାପୂର୍ଣ୍ଣ ଉଦାହରଣ ଦେଖନ୍ତୁ | |
ଟେମ୍ପଲେଟ୍ | | ଷ୍ଟ୍ରିଙ୍ଗ୍ | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
ଟୁଲ୍ ଟିପ୍ ତିଆରି କରିବା ସମୟରେ ବ୍ୟବହାର କରିବାକୁ HTML କୁ ଆଧାର କରନ୍ତୁ | ଟୁଲ୍ ଟିପ୍ ର
ବାହ୍ୟ ରାପର୍ ଉପାଦାନର |
ଆଖ୍ୟା | string | ଉପାଦାନ | କାର୍ଯ୍ୟ | '' |
|
ଟ୍ରିଗର | ଷ୍ଟ୍ରିଙ୍ଗ୍ | 'ହୋଭର ଫୋକସ୍' | ଟୁଲ୍ ଟିପ୍ କିପରି ଟ୍ରିଗର ହୁଏ - କ୍ଲିକ୍ କରନ୍ତୁ | ହୋଭର | ଧ୍ୟାନ | ମାନୁଆଲ୍ | ଆପଣ ଏକାଧିକ ଟ୍ରିଗର ପାସ୍ କରିପାରନ୍ତି; ସେମାନଙ୍କୁ ଏକ ସ୍ପେସ୍ ସହିତ ଅଲଗା କର |
|
ଅଫସେଟ | ସଂଖ୍ୟା | string | କାର୍ଯ୍ୟ | 0 | ଏହାର ଲକ୍ଷ୍ୟ ସହିତ ଟୁଲ୍ ଟିପ୍ ର ଅଫସେଟ୍ | ଯେତେବେଳେ ଅଫସେଟ୍ ନିର୍ଣ୍ଣୟ କରିବା ପାଇଁ ଏକ ଫଙ୍କସନ୍ ବ୍ୟବହୃତ ହୁଏ, ଏହାକୁ ଏହାର ପ୍ରଥମ ଆର୍ଗୁମେଣ୍ଟ୍ ଭାବରେ ଅଫସେଟ୍ ଡାଟା ଧାରଣ କରିଥିବା ଏକ ବସ୍ତୁ ସହିତ କୁହାଯାଏ | ଫଙ୍କସନ୍ ନିଶ୍ଚିତ ଭାବରେ ସମାନ ବସ୍ତୁ ସହିତ ଏକ ବସ୍ତୁ ଫେରସ୍ତ କରିବ | ଟ୍ରାଇଜିଂ ଉପାଦାନ DOM ନୋଡ୍ ଦ୍ୱିତୀୟ ଆର୍ଗୁମେଣ୍ଟ୍ ଭାବରେ ପାସ୍ ହୋଇଛି | ଅଧିକ ସୂଚନା ପାଇଁ ପପର୍ ର ଅଫସେଟ୍ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ | |
ପତନ | string | ଆରେ | 'ଫ୍ଲିପ୍' | ପପ୍ପର କେଉଁ ଅବସ୍ଥାରେ ଫଲବ୍ୟାକ୍ ବ୍ୟବହାର କରିବ ତାହା ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ଅନୁମତି ଦିଅନ୍ତୁ | ଅଧିକ ସୂଚନା ପାଇଁ ପପର୍ଙ୍କ ଆଚରଣ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ | |
କଷ୍ଟମ୍ କ୍ଲାସ୍ | | string | କାର୍ଯ୍ୟ | '' | ଯେତେବେଳେ ଏହା ଦେଖାଯାଏ ଟୁଲ୍ ଟିପ୍ ରେ କ୍ଲାସ୍ ଯୋଡନ୍ତୁ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଟେମ୍ପଲେଟରେ ନିର୍ଦ୍ଦିଷ୍ଟ ଯେକ classes ଣସି ଶ୍ରେଣୀ ସହିତ ଏହି ଶ୍ରେଣୀଗୁଡ଼ିକ ଯୋଗ କରାଯିବ | ଏକାଧିକ ଶ୍ରେଣୀ ଯୋଡିବାକୁ, ସେମାନଙ୍କୁ ସ୍ପେସ୍ ସହିତ ଅଲଗା କରନ୍ତୁ : ଆପଣ ଏକ ଫଙ୍କସନ୍ ମଧ୍ୟ ପାସ୍ କରିପାରିବେ ଯାହା ଅତିରିକ୍ତ ଶ୍ରେଣୀ ନାମ ଧାରଣ କରିଥିବା ଗୋଟିଏ ଷ୍ଟ୍ରିଙ୍ଗକୁ ଫେରାଇବା ଉଚିତ | |
ସୀମା | string | ଉପାଦାନ | 'ସ୍କ୍ରୋଲ୍ ପ୍ୟାରେଣ୍ଟ୍' | ଟୁଲ୍ ଟିପ୍ ର ଓଭରଫ୍ଲୋ ସୀମାବଦ୍ଧ ସୀମା | 'viewport' ,, କିମ୍ବା ଏକ HTMLElement ରେଫରେନ୍ସ (କେବଳ ଜାଭାସ୍କ୍ରିପ୍ଟ) 'window' ର ମୂଲ୍ୟ ଗ୍ରହଣ କରେ | 'scrollParent' ଅଧିକ ସୂଚନା ପାଇଁ ପପର୍ ର ପ୍ରତିରୋଧ ଓଭରଫ୍ଲୋ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ | |
ପରିମଳ | ବୁଲିଅନ୍ | ସତ | ପରିମଳକରଣକୁ ସକ୍ଷମ କିମ୍ବା ଅକ୍ଷମ କରନ୍ତୁ | ଯଦି ସକ୍ରିୟ 'template' ଏବଂ 'title' ବିକଳ୍ପଗୁଡ଼ିକ ପରିମଳ ହେବ | ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ରେ ସାନିଟାଇଜର୍ ବିଭାଗ ଦେଖନ୍ତୁ | |
ଧଳା ତାଲିକା | | ବସ୍ତୁ | ଡିଫଲ୍ଟ ମୂଲ୍ୟ | ଅବଜେକ୍ଟ ଯାହା ଅନୁମତିପ୍ରାପ୍ତ ଗୁଣ ଏବଂ ଟ୍ୟାଗ୍ ଧାରଣ କରେ | |
sanitizeFn | null | କାର୍ଯ୍ୟ | ଶୂନ୍ୟ | ଏଠାରେ ଆପଣ ନିଜର ସାନିଟାଇଜ୍ ଫଙ୍କସନ୍ ଯୋଗାଇ ପାରିବେ | ସାନିଟାଇଜେସନ୍ କରିବା ପାଇଁ ଯଦି ଆପଣ ଏକ ଉତ୍ସର୍ଗୀକୃତ ଲାଇବ୍ରେରୀ ବ୍ୟବହାର କରିବାକୁ ପସନ୍ଦ କରନ୍ତି ତେବେ ଏହା ଉପଯୋଗୀ ହୋଇପାରେ | |
popperConfig | null | ବସ୍ତୁ | ଶୂନ୍ୟ | ବୁଟଷ୍ଟ୍ରାପ୍ ର ଡିଫଲ୍ଟ ପପର୍ ବିନ୍ୟାସ ପରିବର୍ତ୍ତନ କରିବାକୁ, ପପର୍ ର ବିନ୍ୟାସ ଦେଖନ୍ତୁ | |
ବ୍ୟକ୍ତିଗତ ଟୁଲ୍ ଟିପ୍ସ ପାଇଁ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ |
ବ୍ୟକ୍ତିଗତ ଟୁଲ୍ ଟିପ୍ସ ପାଇଁ ବିକଳ୍ପଗୁଡ଼ିକ ବିକଳ୍ପ ଭାବରେ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର ଦ୍ୱାରା ନିର୍ଦ୍ଦିଷ୍ଟ କରାଯାଇପାରିବ, ଯେପରି ଉପରେ ବର୍ଣ୍ଣନା କରାଯାଇଛି |
ପ୍ରଣାଳୀ
ଅସନ୍ତୁଳିତ ପଦ୍ଧତି ଏବଂ ସ୍ଥାନାନ୍ତରଣ |
ସମସ୍ତ API ପଦ୍ଧତିଗୁଡିକ ଅସନ୍ତୁଳିତ ଏବଂ ଏକ ପରିବର୍ତ୍ତନ ଆରମ୍ଭ କରନ୍ତି | ସଂକ୍ରମଣ ଆରମ୍ଭ ହେବା ମାତ୍ରେ ସେମାନେ କଲର୍ ନିକଟକୁ ଫେରିଯାଆନ୍ତି କିନ୍ତୁ ଏହା ଶେଷ ହେବା ପୂର୍ବରୁ | ଏହା ସହିତ, ଏକ ପରିବର୍ତ୍ତନକାରୀ ଉପାଦାନ ଉପରେ ଏକ ପଦ୍ଧତି କଲ୍ କୁ ଅଣଦେଖା କରାଯିବ |
$().tooltip(options)
ଏକ ଉପାଦାନ ସଂଗ୍ରହରେ ଏକ ଟୁଲ୍ ଟିପ୍ ହ୍ୟାଣ୍ଡେଲର୍ ସଂଲଗ୍ନ କରେ |
.tooltip('show')
ଏକ ଉପାଦାନର ଟୁଲଟିପ୍ ପ୍ରକାଶ କରେ | ଟୁଲ୍ ଟିପ୍ ପ୍ରକୃତରେ ଦେଖାଯିବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ shown.bs.tooltip
ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ | ଏହା ଟୁଲ୍ ଟିପ୍ ର ଏକ “ମାନୁଆଲ୍” ଟ୍ରିଗରିଂ ଭାବରେ ବିବେଚନା କରାଯାଏ | ଶୂନ-ଲମ୍ବ ଶିରୋନାମା ସହିତ ଟୁଲ୍ ଟିପ୍ସ କଦାପି ପ୍ରଦର୍ଶିତ ହୁଏ ନାହିଁ |
$('#element').tooltip('show')
.tooltip('hide')
ଏକ ଉପାଦାନର ଟୁଲ୍ ଟିପ୍ ଲୁଚାଏ | ଟୁଲ୍ ଟିପ୍ ପ୍ରକୃତରେ ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ hidden.bs.tooltip
ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ | ଏହା ଟୁଲ୍ ଟିପ୍ ର ଏକ “ମାନୁଆଲ୍” ଟ୍ରିଗରିଂ ଭାବରେ ବିବେଚନା କରାଯାଏ |
$('#element').tooltip('hide')
.tooltip('toggle')
ଏକ ଉପାଦାନର ଟୁଲ୍ ଟିପ୍ ଟୋଗଲ୍ କରେ | ଟୁଲ୍ ଟିପ୍ ପ୍ରକୃତରେ ଦେଖାଯିବା କିମ୍ବା ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ ଘଟଣା କିମ୍ବା ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ | ଏହା ଟୁଲ୍ ଟିପ୍ ର ଏକ “ମାନୁଆଲ୍” ଟ୍ରିଗରିଂ ଭାବରେ ବିବେଚନା କରାଯାଏ |shown.bs.tooltip
hidden.bs.tooltip
$('#element').tooltip('toggle')
.tooltip('dispose')
ଏକ ଉପାଦାନର ଟୁଲ୍ ଟିପ୍ ଲୁଚାଇଥାଏ ଏବଂ ନଷ୍ଟ କରେ | ପ୍ରତିନିଧୀ ବ୍ୟବହାର କରୁଥିବା ସାଧନଗୁଡ଼ିକ (ଯାହା ବିକଳ୍ପ ବ୍ୟବହାର କରିselector
ସୃଷ୍ଟି ହୋଇଥାଏ ) ବଂଶଧର ଟ୍ରିଗର ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ପୃଥକ ଭାବରେ ନଷ୍ଟ ହୋଇପାରିବ ନାହିଁ |
$('#element').tooltip('dispose')
.tooltip('enable')
ଏକ ଉପାଦାନର ଟୁଲ୍ ଟିପ୍ ଦେଖାଇବାକୁ କ୍ଷମତା ଦେଇଥାଏ | ଡିଫଲ୍ଟ ଭାବରେ ଟୁଲ୍ ଟିପ୍ସ ସକ୍ଷମ ହୋଇଛି |
$('#element').tooltip('enable')
.tooltip('disable')
ଏକ ଉପାଦାନର ଟୁଲ୍ ଟିପ୍ ଦେଖାଯିବା ପାଇଁ କ୍ଷମତା ଅପସାରଣ କରେ | ଟୁଲ୍ ଟିପ୍ କେବଳ ପୁନ - ସକ୍ଷମ ହେଲେ ଦେଖାଇବାକୁ ସମର୍ଥ ହେବ |
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
ଏକ ଉପାଦାନର ଟୁଲଟିପ୍ ଦେଖାଯିବା କିମ୍ବା ଲୁଚାଇବା ପାଇଁ କ୍ଷମତାକୁ ଟୋଗଲ୍ କରେ |
$('#element').tooltip('toggleEnabled')
.tooltip('update')
ଏକ ଉପାଦାନର ଟୁଲ୍ ଟିପ୍ ର ସ୍ଥିତିକୁ ଅଦ୍ୟତନ କରେ |
$('#element').tooltip('update')
ଘଟଣା
ଇଭେଣ୍ଟ ପ୍ରକାର | | ବର୍ଣ୍ଣନା |
---|---|
show.bs.tooltip | show ଉଦାହରଣ ପଦ୍ଧତି ଡାକିବା ପରେ ଏହି ଘଟଣା ତୁରନ୍ତ ନିଆଁ ଲାଗେ | |
show.bs.tooltip | ଟୁଲ୍ ଟିପ୍ ଉପଭୋକ୍ତାଙ୍କୁ ଦୃଶ୍ୟମାନ ହେବାପରେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଇଥାଏ (CSS ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) | |
hide.bs.tooltip | hide ଉଦାହରଣ ପଦ୍ଧତି ଡକାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟ ତୁରନ୍ତ ବରଖାସ୍ତ ହୁଏ | |
hidden.bs.tooltip | ଟୁଲ୍ ଟିପ୍ ବ୍ୟବହାରକାରୀଙ୍କଠାରୁ ଲୁକ୍କାୟିତ ହେବା ପରେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଇଥାଏ (CSS ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) | |
inserted.bs.tooltip | show.bs.tooltip ଟୁଲ୍ ଟିପ୍ ଟେମ୍ପଲେଟ୍ DOM ରେ ଯୋଡାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ | |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})