in English

ସାଧନଗୁଡ଼ିକ

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 ଭିତରେ ଥିବା ଏକ ଉପାଦାନ ଯୋଗୁଁ ଟୁଲଟିପ୍ ଟ୍ରିଗର ହୋଇପାରେ |
ଡିଫଲ୍ଟ ଭାବରେ, ଏହି ଉପାଦାନଟି ବିଲ୍ଟ-ଇନ୍ କଣ୍ଟେଣ୍ଟ ସାନିଟାଇଜର ବ୍ୟବହାର କରେ, ଯାହାକି କ HTML ଣସି HTML ଉପାଦାନଗୁଡ଼ିକୁ ବାହାର କରିଦିଏ ଯାହା ସ୍ପଷ୍ଟ ଭାବରେ ଅନୁମତିପ୍ରାପ୍ତ ନୁହେଁ | ଅଧିକ ବିବରଣୀ ପାଇଁ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ରେ ସାନିଟାଇଜର୍ ବିଭାଗ ଦେଖନ୍ତୁ |
ଏହି ଉପାଦାନର ଆନିମେସନ୍ ପ୍ରଭାବ 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ଗୁଣ ଏବଂ titleHTML ଉପାଦାନରେ ଆପଣ ଏକ ଟୁଲ୍ ଟିପ୍ ପାଇବାକୁ ଚାହୁଁଛନ୍ତି | ଏକ ଟୁଲ୍ ଟିପ୍ ର ଉତ୍ପାଦିତ ମାର୍କଅପ୍ ବହୁତ ସରଳ, ଯଦିଓ ଏହା ଏକ ଅବସ୍ଥାନ ଆବଶ୍ୟକ କରେ (ଡିଫଲ୍ଟ ଭାବରେ, 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 | ଉପାଦାନ | ମିଥ୍ୟା ମିଥ୍ୟା

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

ବିଳମ୍ବ ସଂଖ୍ୟା | ବସ୍ତୁ 0

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

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

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

html ବୁଲିଅନ୍ ମିଥ୍ୟା

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

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

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

ସ୍ଥାନ string | କାର୍ଯ୍ୟ 'ଶୀର୍ଷ'

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

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

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

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

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

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

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

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

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

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

ଟ୍ରିଗର ଷ୍ଟ୍ରିଙ୍ଗ୍ 'ହୋଭର ଫୋକସ୍'

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

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

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

ଅଫସେଟ ସଂଖ୍ୟା | string | କାର୍ଯ୍ୟ 0

ଏହାର ଲକ୍ଷ୍ୟ ସହିତ ଟୁଲ୍ ଟିପ୍ ର ଅଫସେଟ୍ |

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

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

ପତନ string | ଆରେ 'ଫ୍ଲିପ୍' ପପ୍ପର କେଉଁ ଅବସ୍ଥାରେ ଫଲବ୍ୟାକ୍ ବ୍ୟବହାର କରିବ ତାହା ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ଅନୁମତି ଦିଅନ୍ତୁ | ଅଧିକ ସୂଚନା ପାଇଁ ପପର୍ଙ୍କ ଆଚରଣ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ |
କଷ୍ଟମ୍ କ୍ଲାସ୍ | string | କାର୍ଯ୍ୟ ''

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

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

ସୀମା 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.tooltiphidden.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...
})