ٽول ٽِپ

اوسر

ٽول ٽائپ پلگ ان کي استعمال ڪرڻ وقت ڄاڻڻ جون شيون:

• ٽول ٽائپس پوزيشن لاءِ 3rd پارٽي لائبريري پوپر تي ڀاڙين ٿيون. توھان کي شامل ڪرڻ گھرجي popper.min.js کان اڳ bootstrap.js يا استعمال ڪريو bootstrap.bundle.min.js/ bootstrap.bundle.jsجنھن ۾ Popper شامل آھي ڪم ڪرڻ لاءِ اوزار ٽائپس لاءِ!
• اوزار ٽائيپ ڪارڪردگي سببن لاءِ آپٽ اِن آهن، تنهنڪري توهان کي انهن کي پاڻ شروع ڪرڻ گهرجي .
• زيرو ڊگھائي عنوانن سان ٽول ٽائپس ڪڏھن به نه ڏيکاريا ويندا آھن.
• container: 'body'وڌيڪ پيچيده اجزاء (جهڙوڪ اسان جي ان پٽ گروپن، بٽڻ گروپن، وغيره) ۾ رينجرنگ مسئلن کان بچڻ لاء وضاحت ڪريو .
• لڪيل عناصر تي ٽول ٽائپس کي ٽوڙڻ ڪم نه ڪندو.
• ٽول ٽائپس لاءِ .disabledيا disabledعناصر لازمي طور تي چاڙهيو وڃي ٿو چادر جي عنصر تي.
• جڏهن هائيپر لنڪس کان شروع ڪيو ويو آهي جيڪو گھڻن لائينن تي مشتمل آهي، ٽول ٽائپس کي مرڪز ڪيو ويندو. هن رويي کان بچڻ لاء white-space: nowrap;توهان جي ايس تي استعمال ڪريو .<a>
• ٽول ٽائپس کي لڪايو وڃي ان کان اڳ جو انهن جي لاڳاپيل عنصرن کي DOM مان هٽايو وڃي.
• ٽول ٽائپس کي شيڊ ڊوم اندر هڪ عنصر جي مهرباني سان شروع ڪري سگهجي ٿو.

اهو سڀ مليو؟ عظيم، اچو ته ڏسو ته اهي ڪجهه مثالن سان ڪيئن ڪم ڪن ٿا.

مثال: هر هنڌ ٽول ٽائپس کي فعال ڪريو

ھڪڙي صفحي تي سڀني ٽول ٽائپس کي شروع ڪرڻ جو ھڪڙو طريقو انھن کي انھن جي 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 ۾ Bootstrap استعمال ڪرڻ وقت ھدايتون نظر اچن ٿيون.

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

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

مارڪ اپ

ٽول ٽائپ لاءِ گهربل مارڪ اپ صرف هڪ dataخاصيت آهي ۽ titleHTML عنصر تي توهان چاهيو ٿا ته هڪ ٽول ٽائپ. ٽول ٽائپ جو ٺاهيل مارڪ اپ بلڪل سادو آهي، جيتوڻيڪ ان کي پوزيشن جي ضرورت آهي (ڊفالٽ طور، topپلگ ان طرفان مقرر ڪيل).

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

اختيارن

اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-bs-، جيئن data-bs-animation="". ڊيٽا جي خاصيتن ذريعي اختيارن کي پاس ڪرڻ وقت ڪيبل ڪيس کان ڪيبل ڪيس ۾ اختيار جي نالي جي ڪيس جي قسم کي تبديل ڪرڻ جي پڪ ڪريو. مثال طور، استعمال ڪرڻ بدران data-bs-customClass="beautifier"، استعمال ڪريو data-bs-custom-class="beautifier".

فنڪشن سان استعمال ڪنديpopperConfig

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

طريقا

ڏيکارڻ

هڪ عنصر جي ٽول ٽائپ کي ظاهر ڪري ٿو. ٽول ٽائپ اصل ۾ ڏيکاريو ويو آهي (يعني واقعي ٿيڻ کان اڳ) ڪالر ڏانهن واپسي . shown.bs.tooltipاهو سمجهيو ويندو آهي "دستي" ٽول ٽائپ جي ٽارگيٽنگ. زيرو ڊگھائي عنوانن سان ٽول ٽائپس ڪڏھن به نه ڏيکاريا ويندا آھن.

tooltip.show()

لڪائڻ

هڪ عنصر جي ٽول ٽائپ کي لڪائيندو آهي. ڪالر ڏانهن واپسي ان کان اڳ جو ٽول ٽائپ اصل ۾ لڪيل هجي (يعني hidden.bs.tooltipواقعي ٿيڻ کان اڳ). اهو سمجهيو ويندو آهي "دستي" ٽول ٽائپ جي ٽارگيٽنگ.

tooltip.hide()

ٽوگل ڪرڻ

هڪ عنصر جي ٽول ٽائپ کي ٽوگل ڪري ٿو. ڪالر ڏانهن واپسي ان کان اڳ جو ٽول ٽائپ اصل ۾ ڏيکاريل يا لڪيل هجي (يعني ان کان اڳ جو واقعو shown.bs.tooltipيا hidden.bs.tooltipواقعو ٿئي). اهو سمجهيو ويندو آهي "دستي" ٽول ٽائپ جي ٽارگيٽنگ.

tooltip.toggle()

نيڪال ڪرڻ

هڪ عنصر جي ٽول ٽائپ کي لڪايو ۽ تباهه ڪري ٿو (ڊوم عنصر تي ذخيرو ٿيل ڊيٽا کي هٽائي ٿو). ٽول ٽائپس جيڪي استعمال ڪندا آهن وفد (جيڪي اختيار استعمال ڪندي ٺاهيا ويا آهن ) selectorانفرادي طور تي نسلي ٽرگر عناصر تي تباهه نه ٿي سگهن.

tooltip.dispose()

چالو ڪرڻ

هڪ عنصر جي ٽول ٽائپ کي ڏيکاريو وڃڻ جي صلاحيت ڏئي ٿو. ٽول ٽائپس کي ڊفالٽ طور فعال ڪيو ويو آهي.

tooltip.enable()

غير فعال ڪرڻ

ھڪڙي عنصر جي ٽول ٽائپ جي صلاحيت کي ڏيکاريو وڃي ٿو. ٽول ٽِپ صرف ان صورت ۾ ڏيکاري سگهبي جڏهن ان کي ٻيهر فعال ڪيو وڃي.

tooltip.disable()

toggle فعال

هڪ عنصر جي ٽول ٽائپ کي ڏيکاريل يا لڪائڻ جي صلاحيت کي ٽوگل ڪري ٿو.

tooltip.toggleEnabled()

تازه ڪاري

هڪ عنصر جي ٽول ٽپ جي پوزيشن کي اپڊيٽ ڪري ٿو.

tooltip.update()

getInstance

جامد طريقو جيڪو توهان کي DOM عنصر سان لاڳاپيل ٽول ٽائپ مثال حاصل ڪرڻ جي اجازت ڏئي ٿو

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

واقعا

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()