সঁজুলিৰ টিপছ

অভাৰভিউ

সঁজুলি টিপ প্লাগ-ইন ব্যৱহাৰ কৰাৰ সময়ত জানিবলগীয়া কথাবোৰ:

• টুলটিপসমূহ অৱস্থানৰ বাবে 3rd party library Popper ৰ ওপৰত নিৰ্ভৰ কৰে । আপুনি bootstrap.js ৰ আগতে popper.min.js অন্তৰ্ভুক্ত কৰিব লাগিব বা bootstrap.bundle.min.js/ ব্যৱহাৰ কৰিব লাগিব bootstrap.bundle.jsযি Popper ধাৰণ কৰে সঁজুলি টিপসমূহে কাম কৰিবলে!
• সঁজুলি টিপসমূহ পৰিৱেশনৰ কাৰণে অপ্ট-ইন হয়, গতিকে আপুনি নিজেই সিহতক আৰম্ভ কৰিব লাগিব ।
• শূন্য-দৈৰ্ঘ্যৰ শিৰোনাম থকা সঁজুলিটিপসমূহ কেতিয়াও প্ৰদৰ্শিত নহয়।
• container: 'body'অধিক জটিল উপাদানসমূহত ৰেণ্ডাৰ সমস্যা এৰাই চলিবলৈ ধাৰ্য্য কৰক (যেনে আমাৰ ইনপুট গোটসমূহ, বুটাম গোটসমূহ, ইত্যাদি)।
• লুকাই থকা উপাদানসমূহৰ ওপৰত সঁজুলি টিপসমূহ ট্ৰিগাৰ কৰিলে কাম নহ'ব।
• .disabledবা উপাদানসমূহৰ বাবে সঁজুলিটিপসমূহ disabledএটা ৰেপাৰ উপাদানত ট্ৰিগাৰ কৰিব লাগিব।
• যেতিয়া একাধিক শাৰীত বিস্তৃত হাইপাৰলিংকৰ পৰা ট্ৰিগাৰ কৰা হয়, সঁজুলি টিপসমূহ কেন্দ্ৰীভূত কৰা হ'ব। এই আচৰণ এৰাই চলিবলৈ white-space: nowrap;আপোনাৰ s ত ব্যৱহাৰ কৰক ।<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 ত Bootstrap ব্যৱহাৰ কৰাৰ সময়ত নিৰ্দেশনাসমূহ প্ৰতিফলিত কৰা হয় ।

<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="". তথ্য বৈশিষ্ট্যসমূহৰ যোগেদি বিকল্পসমূহ পাছ কৰাৰ সময়ত বিকল্প নামৰ কেছৰ ধৰণ camelCase ৰ পৰা kebab-case লৈ সলনি কৰাটো নিশ্চিত কৰক। উদাহৰণস্বৰূপ, ব্যৱহাৰ কৰাৰ পৰিবৰ্তে 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.tooltipবা hidden.bs.tooltipইভেন্ট ঘটাৰ আগতে) কলাৰলৈ উভতি যায়। ইয়াক টুলটিপৰ “মেনুৱেল” ট্ৰিগাৰিং বুলি গণ্য কৰা হয়।

tooltip.toggle()

নিষ্কাশন কৰক

এটা উপাদানৰ সঁজুলিটিপ লুকুৱাই আৰু ধ্বংস কৰে (DOM উপাদানত সংৰক্ষিত তথ্য আঁতৰায়)। ডেলিগেচন ব্যৱহাৰ কৰা সঁজুলিটিপসমূহ (যিসমূহ বিকল্প ব্যৱহাৰ কৰিselector সৃষ্টি কৰা হয় ) বংশধৰ ট্ৰিগাৰ উপাদানসমূহত পৃথকে পৃথকে ধ্বংস কৰিব নোৱাৰি।

tooltip.dispose()

সক্ষম কৰা

এটা উপাদানৰ সঁজুলিটিপক দেখুৱাব পৰা ক্ষমতা দিয়ে। সঁজুলি টিপসমূহ অবিকল্পিতভাৱে সামৰ্থবান কৰা হৈছে।

tooltip.enable()

অক্ষম

এটা উপাদানৰ সঁজুলিটিপ দেখুৱাবলগীয়া ক্ষমতা আঁতৰায়। সঁজুলিটিপটো পুনৰ সামৰ্থবান কৰিলেহে দেখুৱাব পাৰিব।

tooltip.disable()

toggleসামৰ্থবান কৰা হৈছে

এটা উপাদানৰ সঁজুলিটিপ দেখুৱা বা লুকুৱাব পৰা ক্ষমতা টগল কৰে।

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()