টুলটিপস

স্থানীয় শিরোনাম স্টোরেজের জন্য অ্যানিমেশন এবং ডেটা-অ্যাট্রিবিউটের জন্য CSS3 ব্যবহার করে CSS এবং JavaScript-এর সাথে কাস্টম বুটস্ট্র্যাপ টুলটিপ যোগ করার জন্য ডকুমেন্টেশন এবং উদাহরণ।

ওভারভিউ

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

• টুলটিপগুলি অবস্থানের জন্য 3য় পক্ষের লাইব্রেরি Popper.js- এর উপর নির্ভর করে । টুলটিপ কাজ করার জন্য আপনাকে bootstrap.js এর আগে popper.min.js অন্তর্ভুক্ত করতে হবে বা ব্যবহার করতে হবে bootstrap.bundle.min.js/ bootstrap.bundle.jsযাতে Popper.js রয়েছে!
• আপনি যদি উৎস থেকে আমাদের জাভাস্ক্রিপ্ট তৈরি করেন, তাহলে এটির প্রয়োজনutil.js ।
• কার্যক্ষমতার কারণে টুলটিপগুলি অপ্ট-ইন করা হয়েছে, তাই আপনাকে সেগুলি নিজে থেকেই শুরু করতে হবে ৷
• শূন্য-দৈর্ঘ্যের শিরোনাম সহ টুলটিপগুলি কখনই প্রদর্শিত হয় না।
• container: 'body'আরো জটিল উপাদানে রেন্ডারিং সমস্যা এড়াতে নির্দিষ্ট করুন (যেমন আমাদের ইনপুট গ্রুপ, বোতাম গ্রুপ, ইত্যাদি) ।
• লুকানো উপাদানগুলিতে টুলটিপ ট্রিগার করা কাজ করবে না।
• .disabledবা উপাদানগুলির জন্য টুলটিপগুলি disabledএকটি মোড়ক উপাদানে ট্রিগার করা আবশ্যক৷
• একাধিক লাইন বিস্তৃত হাইপারলিংক থেকে ট্রিগার করা হলে, টুলটিপগুলি কেন্দ্রীভূত হবে। এই আচরণ এড়াতে white-space: nowrap;আপনার এস ব্যবহার করুন.<a>
• DOM থেকে তাদের সংশ্লিষ্ট উপাদানগুলি সরানোর আগে টুলটিপগুলি অবশ্যই লুকিয়ে রাখতে হবে৷
• টুলটিপ ট্রিগার করা যেতে পারে একটি ছায়া DOM এর ভিতরে একটি উপাদানের জন্য ধন্যবাদ।

যে সব পেয়েছেন? দুর্দান্ত, আসুন কিছু উদাহরণ দিয়ে তারা কীভাবে কাজ করে তা দেখি।

উদাহরণ: সর্বত্র টুলটিপ সক্ষম করুন

একটি পৃষ্ঠায় সমস্ত টুলটিপ শুরু করার একটি উপায় হল তাদের 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>

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

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

$('#example').tooltip({ boundary: 'window' })

মার্কআপ

একটি টুলটিপের জন্য প্রয়োজনীয় মার্কআপ শুধুমাত্র একটি dataবৈশিষ্ট্য এবং titleHTML উপাদানে আপনি একটি টুলটিপ পেতে চান৷ একটি টুলটিপের জেনারেট করা মার্কআপটি বেশ সহজ, যদিও এটির জন্য একটি অবস্থানের প্রয়োজন হয় (ডিফল্টরূপে, topপ্লাগইন দ্বারা সেট করা)।

<!-- 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=""।

পদ্ধতি

$().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')

Hides and destroys an element’s tooltip. Tooltips that use delegation (which are created using the selector option) cannot be individually destroyed on descendant trigger elements.

$('#element').tooltip('dispose')

.tooltip('enable')

Gives an element’s tooltip the ability to be shown. Tooltips are enabled by default.

$('#element').tooltip('enable')

.tooltip('disable')

Removes the ability for an element’s tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

Toggles the ability for an element’s tooltip to be shown or hidden.

$('#element').tooltip('toggleEnabled')

.tooltip('update')

Updates the position of an element’s tooltip.

$('#element').tooltip('update')

Events

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})