ٹول ٹپس

جائزہ

ٹول ٹپ پلگ ان کا استعمال کرتے وقت جاننے کی چیزیں:

• ٹول ٹپس پوزیشننگ کے لیے تھرڈ پارٹی لائبریری پوپر پر انحصار کرتے ہیں ۔ آپ کو popper.min.js سے پہلے شامل کرنا چاہیے bootstrap.js، یا ایک استعمال کریں bootstrap.bundle.min.jsجس میں Popper ہو۔
• ٹول ٹپس کارکردگی کی وجوہات کی بناء پر آپٹ ان ہوتی ہیں، لہذا آپ کو خود ان کی ابتدا کرنی چاہیے ۔
• زیرو لینتھ ٹائٹلز والے ٹول ٹپس کبھی ظاہر نہیں ہوتے ہیں۔
• 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 میں بوٹسٹریپ استعمال کرتے وقت ہدایات کی عکس بندی کی جاتی ہے۔

<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 کے ساتھ:

سی ایس ایس

متغیرات

بوٹسٹریپ کے ابھرتے ہوئے CSS متغیرات کے نقطہ نظر کے حصے کے طور پر، ٹول ٹپس اب مقامی CSS متغیرات .tooltipکو بہتر ریئل ٹائم حسب ضرورت کے لیے استعمال کرتی ہیں۔ 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>

اختیارات

چونکہ آپشنز کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے، آپ ایک آپشن کا نام شامل کر سکتے ہیں data-bs-، جیسا کہ میں data-bs-animation="{value}"۔ ڈیٹا انتساب کے ذریعے آپشنز کو پاس کرتے وقت آپشن کے نام کی کیس ٹائپ کو " کیمل کیس" سے " کباب کیس " میں تبدیل کرنا یقینی بنائیں۔ مثال کے طور پر، کے 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()