সঁজুলিৰ টিপছ

অভাৰভিউ

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

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

নিৰ্দেশনা

চাৰিটা সঁজুলি টিপছৰ দিশ চাবলৈ তলৰ বুটামসমূহৰ ওপৰত মাউছ কৰক: ওপৰ, সোঁ, তললৈ, আৰু বাওঁ। RTL ত Bootstrap ব্যৱহাৰ কৰাৰ সময়ত নিৰ্দেশনাসমূহ প্ৰতিফলিত কৰা হয় ।

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

আৰু কাষ্টম HTML যোগ কৰা হৈছে:

<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 ৰ সৈতে:

চি এছ এছ

চলকসমূহ

Bootstrap ৰ বিকাশশীল 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"।

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