টুলটিপস

ওভারভিউ

টুলটিপ প্লাগইন ব্যবহার করার সময় যা জানা দরকার:

• টুলটিপ পজিশনের জন্য থার্ড পার্টি লাইব্রেরি পপারের উপর নির্ভর করে । টুলটিপ কাজ করার জন্য আপনাকে 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)
})

উদাহরণ

টুলটিপগুলি দেখতে নীচের লিঙ্কগুলিতে হোভার করুন:

চারটি টুলটিপ দিকনির্দেশ দেখতে নীচের বোতামগুলির উপর হভার করুন: উপরে, ডান, নীচে এবং বাম৷ আরটিএল-এ বুটস্ট্র্যাপ ব্যবহার করার সময় দিকনির্দেশ মিরর করা হয়।

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

এবং কাস্টম এইচটিএমএল যোগ করা হয়েছে:

<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.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

ঘটনা

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

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

tooltip.hide()