مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
in English

ٹول ٹپس

سی ایس ایس اور جاوا اسکرپٹ کے ساتھ حسب ضرورت بوٹسٹریپ ٹول ٹپس کو اینیمیشن کے لیے CSS3 اور مقامی ٹائٹل سٹوریج کے لیے ڈیٹا-bs-انتسابات کو شامل کرنے کے لیے دستاویزات اور مثالیں۔

اس صفحہ پر

جائزہ

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

  • ٹول ٹپس پوزیشننگ کے لیے 3rd پارٹی لائبریری Popper پر انحصار کرتے ہیں ۔ ٹول ٹپس کے کام کرنے کے لیے آپ کو bootstrap.js سے پہلے popper.min.js شامل کرنا چاہیے یا استعمال کریں bootstrap.bundle.min.js/ bootstrap.bundle.jsجس میں Popper شامل ہے!
  • ٹول ٹپس کارکردگی کی وجوہات کی بناء پر آپٹ ان ہوتی ہیں، لہذا آپ کو خود ان کی ابتدا کرنی چاہیے ۔
  • زیرو لینتھ ٹائٹلز والے ٹول ٹپس کبھی ظاہر نہیں ہوتے ہیں۔
  • container: 'body'مزید پیچیدہ اجزاء (جیسے ہمارے ان پٹ گروپس، بٹن گروپس وغیرہ) میں رینڈرنگ کے مسائل سے بچنے کے لیے وضاحت کریں۔
  • پوشیدہ عناصر پر ٹول ٹپس کو متحرک کرنا کام نہیں کرے گا۔
  • ٹول ٹپس .disabledیا disabledعناصر کو ریپر عنصر پر متحرک کیا جانا چاہیے۔
  • متعدد لائنوں پر پھیلے ہوئے ہائپر لنکس سے متحرک ہونے پر، ٹول ٹِپس کو مرکز میں رکھا جائے گا۔ اس رویے سے بچنے کے لیے white-space: nowrap;اپنے s پر استعمال کریں ۔<a>
  • ٹول ٹپس کو چھپایا جانا چاہیے اس سے پہلے کہ ان کے متعلقہ عناصر کو DOM سے ہٹا دیا جائے۔
  • ٹول ٹپس کو شیڈو DOM کے اندر موجود عنصر کی بدولت متحرک کیا جا سکتا ہے۔
پہلے سے طے شدہ طور پر، یہ جزو بلٹ ان مواد سینیٹائزر کا استعمال کرتا ہے، جو کسی بھی HTML عناصر کو ہٹا دیتا ہے جس کی واضح طور پر اجازت نہیں ہے۔ مزید تفصیلات کے لیے ہمارے JavaScript دستاویزات میں سینیٹائزر کا سیکشن دیکھیں ۔
prefers-reduced-motionاس جزو کا اینیمیشن اثر میڈیا کے استفسار پر منحصر ہے ۔ ہماری ایکسیسبیلٹی دستاویزات کا کم موشن سیکشن دیکھیں ۔

وہ سب مل گیا؟ بہت اچھا، آئیے دیکھتے ہیں کہ وہ کچھ مثالوں کے ساتھ کیسے کام کرتے ہیں۔

مثال: ٹول ٹپس کو ہر جگہ فعال کریں۔

کسی صفحے پر تمام ٹول ٹپس کو شروع کرنے کا ایک طریقہ یہ ہوگا کہ انہیں ان کی data-bs-toggleصفت کے مطابق منتخب کیا جائے:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

مثالیں

ٹول ٹپس دیکھنے کے لیے نیچے دیے گئے لنکس پر ہوور کریں:

ٹول ٹپس کے ساتھ کچھ ان لائن لنکس کو ظاہر کرنے کے لیے پلیس ہولڈر کا متن ۔ یہ اب صرف فلر ہے، کوئی قاتل نہیں۔ اصل متن کی موجودگی کی نقل کرنے کے لیے مواد یہاں رکھا گیا ہے ۔ اور یہ سب صرف آپ کو اندازہ دینے کے لیے کہ جب حقیقی دنیا کے حالات میں استعمال کیا جائے تو ٹول ٹِپس کیسی نظر آئیں گی۔ تو امید ہے کہ اب آپ نے دیکھا ہوگا کہ لنکس پر یہ ٹول ٹپس عملی طور پر کیسے کام کر سکتی ہیں، ایک بار جب آپ انہیں اپنی سائٹ یا پروجیکٹ پر استعمال کریں۔

ٹول ٹپس کی چار سمتیں دیکھنے کے لیے نیچے کے بٹنوں پر ہوور کریں: اوپر، دائیں، نیچے اور بائیں۔ RTL میں بوٹسٹریپ استعمال کرتے وقت ہدایات کی عکس بندی کی جاتی ہے۔

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

اور حسب ضرورت HTML کے ساتھ شامل کیا گیا:

<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)
اوور فلو autoاورscroll

ٹول ٹِپ پوزیشن خود بخود تبدیل ہونے کی کوشش کرتی ہے جب کسی پیرنٹ کنٹینر میں ہمارا ہوتا overflow: autoیا overflow: scrollپسند ہوتا ہے .table-responsive، لیکن پھر بھی اصل پلیسمنٹ کی پوزیشننگ برقرار رہتی ہے۔ اسے حل کرنے کے لیے، پہلے سے طے شدہ قدر کو اوور رائڈ کرنے کے لیے کسی بھی HTMLElement پر boundaryآپشن (آپشن کا استعمال کرتے ہوئے فلپ موڈیفائر کے لیے) سیٹ کریں ، جیسے :popperConfig'clippingParents'document.body

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

مارک اپ

ٹول ٹِپ کے لیے مطلوبہ مارک اپ صرف ایک dataوصف ہے اور titleHTML عنصر پر آپ ٹول ٹِپ رکھنا چاہتے ہیں۔ ٹول ٹپ کا تیار کردہ مارک اپ بہت آسان ہے، حالانکہ اس کے لیے پوزیشن کی ضرورت ہوتی ہے (بطور ڈیفالٹ، topپلگ ان کے ذریعے سیٹ کیا جاتا ہے)۔

ٹول ٹپس بنانا کی بورڈ اور معاون ٹیکنالوجی کے صارفین کے لیے کام کرتا ہے۔

آپ کو صرف HTML عناصر میں ٹول ٹِپس شامل کرنے چاہئیں جو روایتی طور پر کی بورڈ پر فوکس ایبل اور انٹرایکٹو ہوتے ہیں (جیسے لنکس یا فارم کنٹرول)۔ اگرچہ صوابدیدی HTML عناصر (جیسے <span>s) کو tabindex="0"انتساب کا اضافہ کر کے قابل توجہ بنایا جا سکتا ہے، لیکن اس سے کی بورڈ صارفین کے لیے غیر متعامل عناصر پر ممکنہ طور پر پریشان کن اور الجھا دینے والے ٹیب اسٹاپس شامل ہو جائیں گے، اور زیادہ تر معاون ٹیکنالوجیز فی الحال اس صورت حال میں ٹول ٹپ کا اعلان نہیں کرتی ہیں۔ hoverمزید برآں، اپنے ٹول ٹِپ کے محرک کے طور پر مکمل طور پر انحصار نہ کریں، کیونکہ یہ آپ کے ٹول ٹِپس کو کی بورڈ صارفین کے لیے متحرک کرنا ناممکن بنا دے گا۔

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

اختیارات

اختیارات کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-bs-، جیسا کہ میں data-bs-animation=""۔ ڈیٹا انتساب کے ذریعے آپشنز کو پاس کرتے وقت آپشن کے کیس کی قسم کو CamelCase سے kebab-case میں تبدیل کرنا یقینی بنائیں۔ مثال کے طور پر، استعمال کرنے کے بجائے data-bs-customClass="beautifier"، استعمال کریں data-bs-custom-class="beautifier"۔

نوٹ کریں کہ حفاظتی وجوہات کی بناء پر sanitize، sanitizeFnاور allowListآپشنز کو ڈیٹا انتساب کا استعمال کرتے ہوئے فراہم نہیں کیا جا سکتا۔
نام قسم طے شدہ تفصیل
animation بولین true ٹول ٹپ پر سی ایس ایس فیڈ ٹرانزیشن کا اطلاق کریں۔
container تار | عنصر | جھوٹا false

ٹول ٹپ کو ایک مخصوص عنصر میں شامل کرتا ہے۔ مثال: container: 'body'. یہ آپشن خاص طور پر اس لحاظ سے مفید ہے کہ یہ آپ کو دستاویز کے بہاؤ میں ٹول ٹپ کو محرک عنصر کے قریب رکھنے کی اجازت دیتا ہے - جو ونڈو کا سائز تبدیل کرنے کے دوران ٹول ٹپ کو محرک عنصر سے دور تیرنے سے روکے گا۔
delay نمبر | چیز 0

ٹول ٹپ (ms) دکھانے اور چھپانے میں تاخیر - دستی ٹرگر کی قسم پر لاگو نہیں ہوتا ہے۔

اگر کوئی نمبر فراہم کیا جاتا ہے، تو چھپنے / دکھانے دونوں پر تاخیر کا اطلاق ہوتا ہے۔

آبجیکٹ کی ساخت ہے:delay: { "show": 500, "hide": 100 }
html بولین false

ٹول ٹپ میں HTML کی اجازت دیں۔

اگر درست ہے تو، ٹول ٹِپ میں موجود HTML ٹیگز ٹول ٹِپ titleمیں پیش کیے جائیں گے۔ اگر غلط innerTextہے تو DOM میں مواد داخل کرنے کے لیے پراپرٹی کا استعمال کیا جائے گا۔

اگر آپ XSS حملوں کے بارے میں فکر مند ہیں تو متن کا استعمال کریں۔
placement تار | فنکشن 'top'

ٹول ٹپ کی پوزیشن کیسے لگائیں - آٹو | اوپر | نیچے | بائیں | صحیح
جب autoمخصوص کیا جاتا ہے، یہ ٹول ٹپ کو متحرک طور پر دوبارہ ترتیب دے گا۔

جب کسی فنکشن کو پلیسمنٹ کا تعین کرنے کے لیے استعمال کیا جاتا ہے، تو اسے ٹول ٹِپ DOM نوڈ کے ساتھ اس کی پہلی دلیل کے طور پر اور محرک عنصر DOM نوڈ کو اس کے دوسرے کے طور پر کہا جاتا ہے۔ سیاق و سباق کو thisٹول ٹپ مثال پر سیٹ کیا گیا ہے۔
selector تار | جھوٹا false اگر ایک سلیکٹر فراہم کیا جاتا ہے تو، ٹول ٹپ آبجیکٹ کو مخصوص اہداف کے حوالے کر دیا جائے گا۔ jQuery.onعملی طور پر، اس کا استعمال متحرک طور پر شامل کردہ DOM عناصر ( سپورٹ) پر ٹول ٹپس کو لاگو کرنے کے لیے بھی کیا جاتا ہے ۔ یہ اور ایک معلوماتی مثال دیکھیں ۔
template تار '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

ٹول ٹپ بناتے وقت استعمال کرنے کے لیے HTML کی بنیاد رکھیں۔

ٹول ٹِپ titleکو میں داخل کیا جائے گا .tooltip-inner۔

.tooltip-arrowٹول ٹپ کا تیر بن جائے گا۔

سب سے بیرونی ریپر عنصر میں .tooltipکلاس اور ہونا چاہیے role="tooltip"۔
title تار | عنصر | فنکشن ''

titleاگر انتساب موجود نہیں ہے تو پہلے سے طے شدہ عنوان کی قدر ۔

اگر کوئی فنکشن دیا جاتا ہے، تو اسے اس thisعنصر کے حوالے سے کہا جائے گا جس کے ساتھ ٹول ٹپ منسلک ہے۔
trigger تار 'hover focus'

ٹول ٹپ کو کیسے متحرک کیا جاتا ہے - کلک کریں | ہوور | توجہ مرکوز | دستی آپ متعدد محرکات کو پاس کر سکتے ہیں۔ انہیں ایک جگہ کے ساتھ الگ کریں.

'manual'.show()اشارہ کرتا ہے کہ ٹول ٹِپ کو پروگرامی طور پر , .hide()اور .toggle()طریقوں کے ذریعے متحرک کیا جائے گا ۔ اس قدر کو کسی دوسرے ٹرگر کے ساتھ نہیں ملایا جا سکتا۔

'hover'اپنے طور پر ٹول ٹِپس کا نتیجہ نکلے گا جو کی بورڈ کے ذریعے متحرک نہیں ہوسکتے ہیں، اور صرف اس صورت میں استعمال کیے جائیں گے جب کی بورڈ صارفین کے لیے وہی معلومات پہنچانے کے متبادل طریقے موجود ہوں۔
fallbackPlacements صف ['top', 'right', 'bottom', 'left'] صف میں جگہوں کی فہرست فراہم کرکے (ترجیح کی ترتیب میں) فال بیک پلیسمنٹ کی وضاحت کریں۔ مزید معلومات کے لیے Popper کے رویے کی دستاویزات دیکھیں
boundary تار | عنصر 'clippingParents' ٹول ٹپ کی اوور فلو رکاوٹ کی حد (صرف پوپر کے روکنے والے اوور فلو موڈیفائر پر لاگو ہوتا ہے)۔ پہلے سے طے شدہ طور پر یہ 'clippingParents'ایک HTMLElement حوالہ (صرف JavaScript کے ذریعے) ہے اور قبول کر سکتا ہے۔ مزید معلومات کے لیے Popper's detectOverflow docs دیکھیں ۔
customClass تار | فنکشن ''

ٹول ٹپ کے دکھائے جانے پر اس میں کلاسز شامل کریں۔ نوٹ کریں کہ یہ کلاسز ٹیمپلیٹ میں بیان کردہ کسی بھی کلاس کے علاوہ شامل کی جائیں گی۔ متعدد کلاسز کو شامل کرنے کے لیے، انہیں خالی جگہوں سے الگ کریں: 'class-1 class-2'.

آپ ایک فنکشن بھی پاس کر سکتے ہیں جس میں اضافی کلاس کے ناموں پر مشتمل ایک سٹرنگ واپس کرنی چاہیے۔
sanitize بولین true سینیٹائزیشن کو فعال یا غیر فعال کریں۔ اگر چالو 'template'اور 'title'اختیارات کو صاف کیا جائے گا۔ ہمارے JavaScript دستاویزات میں سینیٹائزر سیکشن دیکھیں ۔
allowList چیز پہلے سے طے شدہ قیمت آبجیکٹ جس میں اجازت دی گئی صفات اور ٹیگز شامل ہیں۔
sanitizeFn null | فنکشن null یہاں آپ اپنا سینیٹائز فنکشن فراہم کر سکتے ہیں۔ یہ کارآمد ثابت ہو سکتا ہے اگر آپ صفائی کو انجام دینے کے لیے ایک وقف شدہ لائبریری استعمال کرنے کو ترجیح دیں۔
offset صف | تار | فنکشن [0, 0]

اس کے ہدف کے نسبت ٹول ٹپ کا آفسیٹ۔ آپ کوما سے الگ کردہ اقدار کے ساتھ ڈیٹا کی خصوصیات میں ایک سٹرنگ پاس کر سکتے ہیں جیسے:data-bs-offset="10,20"

جب کوئی فنکشن آفسیٹ کا تعین کرنے کے لیے استعمال کیا جاتا ہے، تو اسے ایک ایسی چیز کے ساتھ بلایا جاتا ہے جس میں پاپر پلیسمنٹ، حوالہ، اور پاپر اس کی پہلی دلیل کے طور پر رییکٹ کرتا ہے۔ محرک عنصر DOM نوڈ کو دوسری دلیل کے طور پر پاس کیا جاتا ہے۔ فنکشن کو دو نمبروں کے ساتھ ایک صف واپس کرنی چاہیے: ۔[skidding, distance]

مزید معلومات کے لیے Popper کی آفسیٹ دستاویزات دیکھیں ۔
popperConfig null | اعتراض | فنکشن null

Bootstrap کی ڈیفالٹ Popper config کو تبدیل کرنے کے لیے، Popper کی کنفیگریشن دیکھیں ۔

جب کسی فنکشن کو پاپر کنفیگریشن بنانے کے لیے استعمال کیا جاتا ہے، تو اسے کسی ایسی چیز کے ساتھ بلایا جاتا ہے جس میں بوٹسٹریپ کی ڈیفالٹ پاپر کنفیگریشن ہوتی ہے۔ یہ آپ کو اپنی ترتیب کے ساتھ پہلے سے طے شدہ کو استعمال کرنے اور ضم کرنے میں مدد کرتا ہے۔ فنکشن کو پوپر کے لیے کنفیگریشن آبجیکٹ واپس کرنا چاہیے۔

انفرادی ٹول ٹپس کے لیے ڈیٹا کی خصوصیات

انفرادی ٹول ٹِپس کے لیے اختیارات کو متبادل طور پر ڈیٹا انتساب کے استعمال کے ذریعے بیان کیا جا سکتا ہے، جیسا کہ اوپر بیان کیا گیا ہے۔

کے ساتھ فنکشن کا استعمالpopperConfig

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

طریقے

غیر مطابقت پذیر طریقے اور ٹرانزیشن

تمام API طریقے غیر مطابقت پذیر ہیں اور ایک منتقلی شروع کرتے ہیں ۔ منتقلی شروع ہوتے ہی وہ کال کرنے والے کے پاس واپس آ جاتے ہیں لیکن اس کے ختم ہونے سے پہلے ۔ اس کے علاوہ، منتقلی کے جزو پر میتھڈ کال کو نظر انداز کر دیا جائے گا ۔

مزید معلومات کے لیے ہماری جاوا اسکرپٹ دستاویزات دیکھیں ۔

دکھائیں

ایک عنصر کے ٹول ٹپ کو ظاہر کرتا ہے۔ ٹول ٹِپ کے حقیقت میں دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی 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()

toggleEnabled

کسی عنصر کے ٹول ٹپ کو دکھانے یا چھپانے کی صلاحیت کو ٹوگل کرتا ہے۔

tooltip.toggleEnabled()

اپ ڈیٹ

کسی عنصر کے ٹول ٹپ کی پوزیشن کو اپ ڈیٹ کرتا ہے۔

tooltip.update()

getInstance

جامد طریقہ جو آپ کو ڈوم عنصر سے وابستہ ٹول ٹپ مثال حاصل کرنے کی اجازت دیتا ہے۔

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

تقریبات

واقعہ کی قسم تفصیل
show.bs.tooltip یہ واقعہ فوری طور پر فائر ہو جاتا ہے جب showمثال کا طریقہ کہا جاتا ہے۔
shown.bs.tooltip یہ ایونٹ اس وقت برطرف ہو جاتا ہے جب ٹول ٹپ صارف کے لیے مرئی ہو جاتی ہے (CSS ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔
hide.bs.tooltip اس واقعہ کو فوری طور پر برطرف کر دیا جاتا ہے جب hideمثال کے طریقے کو بلایا جاتا ہے۔
hidden.bs.tooltip جب ٹول ٹپ صارف سے پوشیدہ ہو جائے تو یہ ایونٹ فائر کیا جاتا ہے (CSS ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔
inserted.bs.tooltip یہ ایونٹ اس ایونٹ کے بعد فائر کیا جاتا ہے show.bs.tooltipجب ٹول ٹپ ٹیمپلیٹ کو DOM میں شامل کیا جاتا ہے۔ 
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()