টুলটিপস

ওভারভিউ

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

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

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

উদাহরণ

টুলটিপ সক্রিয় করুন

উপরে উল্লিখিত হিসাবে, টুলটিপগুলি ব্যবহার করার আগে আপনাকে অবশ্যই শুরু করতে হবে। একটি পৃষ্ঠায় সমস্ত টুলটিপ শুরু করার একটি উপায় হল তাদের data-bs-toggleবৈশিষ্ট্য অনুসারে তাদের নির্বাচন করা, যেমন:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

লিঙ্কে টুলটিপ

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

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

কাস্টম টুলটিপস

আপনি CSS ভেরিয়েবল ব্যবহার করে টুলটিপের চেহারা কাস্টমাইজ করতে পারেন । data-bs-custom-class="custom-tooltip"আমরা আমাদের কাস্টম উপস্থিতির সুযোগের জন্য একটি কাস্টম ক্লাস সেট করি এবং একটি স্থানীয় CSS ভেরিয়েবলকে ওভাররাইড করতে এটি ব্যবহার করি।

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

দিকনির্দেশ

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

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
  Tooltip on left
</button>

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

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

একটি SVG সহ:

সিএসএস

ভেরিয়েবল

বুটস্ট্র্যাপের বিকশিত CSS ভেরিয়েবল পদ্ধতির অংশ হিসাবে, টুলটিপগুলি এখন .tooltipউন্নত রিয়েল-টাইম কাস্টমাইজেশনের জন্য স্থানীয় CSS ভেরিয়েবল ব্যবহার করে। CSS ভেরিয়েবলের মান Sass এর মাধ্যমে সেট করা হয়, তাই Sass কাস্টমাইজেশন এখনও সমর্থিত।

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

Sass ভেরিয়েবল

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

ব্যবহার

টুলটিপ প্লাগইন চাহিদা অনুযায়ী সামগ্রী এবং মার্কআপ তৈরি করে এবং ডিফল্টভাবে তাদের ট্রিগার উপাদানের পরে টুলটিপগুলি রাখে।

জাভাস্ক্রিপ্টের মাধ্যমে টুলটিপটি ট্রিগার করুন:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

const tooltip = new bootstrap.Tooltip('#example', {
  boundary: document.body // or document.querySelector('#boundary')
})

মার্কআপ

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

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

অপশন

যেহেতু বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে, আপনি তে একটি বিকল্প নাম যুক্ত করতে data-bs-পারেন data-bs-animation="{value}"। ডেটা অ্যাট্রিবিউটের মাধ্যমে বিকল্পগুলি পাস করার সময় বিকল্পের নামটির কেস টাইপ " camelCase " থেকে " kebab-case " এ পরিবর্তন করা নিশ্চিত করুন। উদাহরণস্বরূপ, data-bs-custom-class="beautifier"এর পরিবর্তে ব্যবহার করুন data-bs-customClass="beautifier"।

বুটস্ট্র্যাপ 5.2.0 অনুসারে, সমস্ত উপাদান একটি পরীক্ষামূলক সংরক্ষিত ডেটা অ্যাট্রিবিউটকে সমর্থন করে data-bs-configযা একটি JSON স্ট্রিং হিসাবে সাধারণ উপাদান কনফিগারেশন রাখতে পারে। যখন একটি উপাদান data-bs-config='{"delay":0, "title":123}'এবং data-bs-title="456"বৈশিষ্ট্য থাকে, চূড়ান্ত titleমান হবে 456এবং পৃথক ডেটা বৈশিষ্ট্যগুলি তে দেওয়া মানগুলিকে ওভাররাইড করবে data-bs-config৷ উপরন্তু, বিদ্যমান ডেটা বৈশিষ্ট্যগুলি যেমন JSON মান রাখতে সক্ষম data-bs-delay='{"show":0,"hide":150}'।

সঙ্গে ফাংশন ব্যবহার করেpopperConfig

const tooltip = new bootstrap.Tooltip(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

পদ্ধতি

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

ঘটনা

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()