Source

ٽول ٽِپ

سي ايس ايس ۽ جاوا اسڪرپٽ سان ڪسٽم بوٽ اسٽريپ ٽول ٽائپس شامل ڪرڻ لاءِ دستاويز ۽ مثال CSS3 استعمال ڪندي اينيميشنز ۽ ڊيٽا-خاصيتون مقامي ٽائيٽل اسٽوريج لاءِ.

اوسر

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

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

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

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

ھڪڙي صفحي تي سڀني ٽول ٽائپس کي شروع ڪرڻ جو ھڪڙو طريقو انھن کي انھن جي data-toggleخاصيت سان چونڊيو ويندو:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

مثال

ٽول ٽائپس ڏسڻ لاءِ هيٺ ڏنل لنڪ تي هور ڪريو:

تنگ پتلون ايندڙ ليول ڪيفيه توهان شايد انهن بابت نه ٻڌو هوندو. فوٽو بوٿ بيئر خام ڊينم ليٽرپريس ويگن ميسينجر بيگ اسٽمپ ٽائون. فارم-ٽو-ٽيبل سيٽن، ميڪسويني جي فڪسي پائيدار quinoa 8-bit آمريڪن ڪپڙا آهن هڪ ٽيري رچرڊسن ونائل چيمبري. Beard stumptown, cardigans banh mi lomo Thundercats. ٽوفو بايو ڊيزل وليمسبرگ مارفا، چار لوڪو ميڪسويني جي صاف ويگن چيمبري. هڪ واقعي لوهي ڪاريگر جيڪو به ڪيٽار، سينسٽر فارم کان ٽيبل بئنڪسي آسٽن ٽوئيٽر هينڊل فريگن ڪريڊ را ڊينم سنگل اصل ڪافي وائرل.

ھيٺ ڏنل بٽڻن تي ھوور ڪريو چار ٽول ٽائپس ھدايتون ڏسڻ لاءِ: مٿي، ساڄي، ھيٺ، ۽ کاٻي.

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

۽ ڪسٽم HTML سان شامل ڪيو ويو:

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

استعمال

ٽول ٽائپ پلگ ان مطالبن تي مواد ۽ مارڪ اپ ٺاهي ٿو، ۽ ڊفالٽ طور تي ٽول ٽائپس کي انهن جي محرڪ عنصر کان پوءِ رکي ٿو.

جاوا اسڪرپٽ ذريعي ٽول ٽائپ کي ٽوڙيو:

$('#example').tooltip(options)
اوور فلو auto۽scroll

ٽول ٽائپ پوزيشن خودڪار طريقي سان تبديل ڪرڻ جي ڪوشش ڪري ٿي جڏهن هڪ والدين ڪنٽينر overflow: autoهجي يا overflow: scrollاسان جي پسند .table-responsive، پر اڃا تائين اصل جڳهه جي پوزيشن کي برقرار رکي ٿي. حل ڪرڻ لاءِ، boundaryڊيفالٽ ويل کان سواءِ ڪنهن به شيءِ تي اختيار مقرر ڪريو 'scrollParent'، جيئن ته 'window':

$('#example').tooltip({ boundary: 'window' })

مارڪ اپ

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

ڪيبورڊ ۽ مددگار ٽيڪنالاجي استعمال ڪندڙن لاءِ ٽول ٽائيپ ڪم ڪرڻ

توهان کي صرف HTML عناصر ۾ ٽول ٽائپ شامل ڪرڻ گهرجي جيڪي روايتي طور تي ڪيبورڊ-مرڪوز ۽ انٽرايڪٽو آهن (جهڙوڪ لنڪس يا فارم ڪنٽرول). جيتوڻيڪ صوابديدي HTML عناصر (جهڙوڪ <span>s) کي tabindex="0"وصف شامل ڪرڻ سان ڌيان ڏيڻ جي قابل بڻائي سگهجي ٿو، اهو ڪيبورڊ استعمال ڪندڙن لاءِ غير متضاد عناصر تي ممڪن طور تي پريشان ڪندڙ ۽ مونجهارو ٽيب اسٽاپ شامل ڪندو. ان کان علاوه، سڀ کان وڌيڪ مددگار ٽيڪنالاجيون هن وقت هن صورتحال ۾ ٽول ٽائپ جو اعلان نه ڪندا آهن.

اضافي طور تي، صرف پنهنجي ٽول ٽائپ لاءِ ٽرگر تي ڀروسو نه hoverڪريو، ڇو ته اهو توهان جي ٽول ٽائپس کي ڪيبورڊ استعمال ڪندڙن لاءِ ٽرگر ڪرڻ ناممڪن بڻائيندو.

<!-- HTML to write -->
<a href="#" data-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="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

معذور عناصر

وصف سان گڏ عناصر disabledمتعامل نه هوندا آهن، مطلب ته صارف هڪ ٽول ٽائپ (يا پاپ اوور) کي ٽرگر ڪرڻ لاءِ انهن تي توجهه، هوور، يا ڪلڪ نٿا ڪري سگهن. ڪم ڪار جي طور تي، توھان چاھيو ٿا ٽول ٽِپ کي ٽول ٽِپ ھڪڙي ريپر مان <div>يا <span>، مثالي طور تي ڪيبورڊ تي ڌيان ڏيڻ جي قابل استعمال ڪندي tabindex="0"، ۽ غير pointer-eventsفعال عنصر تي اوور رائڊ ڪرڻ چاھيو ٿا.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

اختيارن

اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-، جيئن data-animation="".

نالو قسم ڊفالٽ وصف
انيميشن بولين سچو ٽول ٽائپ تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو
ڪنٽينر تار | عنصر | ڪوڙو ڪوڙو

ٽول ٽائپ کي مخصوص عنصر ۾ شامل ڪري ٿو. مثال: container: 'body'. هي اختيار خاص طور تي مفيد آهي ته اهو توهان کي اجازت ڏئي ٿو ٽول ٽائپ کي دستاويز جي وهڪري ۾ ٽريگرنگ عنصر جي ويجهو - جيڪو ٽول ٽائپ کي ونڊو ريسائز ڪرڻ دوران ٽريگرنگ عنصر کان پري ٿيڻ کان روڪيندو.
دير ڪرڻ نمبر | اعتراض 0

ٽول ٽائپ (ms) ڏيکارڻ ۽ لڪائڻ ۾ دير - دستي ٽرگر جي قسم تي لاڳو نٿو ٿئي

جيڪڏهن هڪ نمبر فراهم ڪيو ويو آهي، دير سان لڪايو / ڏيکاريو ٻنهي تي لاڳو ٿئي ٿو

اعتراض جي جوڙجڪ آهي:delay: { "show": 500, "hide": 100 }
html بولين ڪوڙو

ٽول ٽائپ ۾ HTML کي اجازت ڏيو.

جيڪڏهن صحيح آهي، ٽول ٽائپ ۾ HTML ٽيگ ٽول ٽائپ title۾ پيش ڪيا ويندا. جيڪڏهن غلط آهي، jQuery جو textطريقو استعمال ڪيو ويندو مواد کي DOM ۾ داخل ڪرڻ لاء.

متن استعمال ڪريو جيڪڏھن توھان پريشان آھيو XSS حملن بابت.
لڳائڻ تار | فنڪشن 'مٿي'

ٽول ٽائپ کي ڪيئن پوزيشن ڏيڻ - خودڪار | مٿي | هيٺان | کاٻي | ساڄو.
جڏهن autoبيان ڪيو ويو آهي، اهو متحرڪ طور تي ٽول ٽائپ کي ٻيهر ترتيب ڏيندو.

جڏهن هڪ فنڪشن استعمال ڪيو ويندو آهي جڳهه کي طئي ڪرڻ لاء، ان کي سڏيو ويندو آهي ٽول ٽائپ DOM نوڊ ان جي پهرين دليل جي طور تي ۽ محرڪ عنصر DOM نوڊ ان جي سيڪنڊ طور. thisحوالو ٽول ٽائپ مثال تي مقرر ڪيو ويو آهي .
چونڊيندڙ تار | ڪوڙو ڪوڙو جيڪڏهن هڪ چونڊيندڙ مهيا ڪيو ويو آهي، ٽول ٽائپ شيون مقرر ڪيل هدفن ڏانهن موڪليا ويندا. عملي طور تي، اهو استعمال ڪيو ويندو آهي متحرڪ HTML مواد کي فعال ڪرڻ لاءِ پاپ اوور شامل ڪرڻ لاءِ. هي ڏسو ۽ هڪ معلوماتي مثال .
ٽيمپليٽ تار '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

ٽول ٽائپ ٺاهڻ وقت استعمال ڪرڻ لاءِ بنيادي HTML.

ٽول ٽائپ کي انجيڪشن title۾ داخل ڪيو ويندو .tooltip-inner.

.arrowٽول ٽائپ جو تير بڻجي ويندو.

سڀ کان ٻاهرئين لفافي عنصر کي .tooltipڪلاس ۽ role="tooltip".
عنوان تار | عنصر | فنڪشن ''

ڊفالٽ عنوان جي قيمت جيڪڏهن titleخاصيت موجود نه آهي.

جيڪڏهن ڪو فنڪشن ڏنو ويو آهي، ان کي سڏيو ويندو ان جي thisحوالي سان ان عنصر ڏانهن سيٽ جنهن سان ٽول ٽائپ ڳنڍيل آهي.
محرڪ تار 'هور فوڪس'

ٽول ٽائپ ڪيئن شروع ٿئي ٿو - ڪلڪ ڪريو | هور | ڌيان | دستور. توھان ڪيترائي محرڪ پاس ڪري سگھو ٿا؛ انھن کي ھڪڙي جڳھ سان الڳ ڪريو.

'manual'.tooltip('show')ظاھر ڪري ٿو ته ٽول ٽائپ پروگرام جي طور تي , .tooltip('hide')۽ .tooltip('toggle')طريقن ذريعي شروع ڪيو ويندو ؛ هي قدر ڪنهن ٻئي ٽرگر سان گڏ نه ٿو ڪري سگهجي.

'hover'ان جي نتيجي ۾ ٽول ٽائپس جي صورت ۾ نڪرندا جيڪي ڪيبورڊ جي ذريعي شروع نه ٿي سگھن، ۽ صرف ان صورت ۾ استعمال ٿيڻ گهرجن جڏھن ڪيبورڊ استعمال ڪندڙن لاءِ ساڳي معلومات پھچائڻ جا متبادل طريقا موجود ھجن.
بند ڪرڻ نمبر | تار 0 ٽول ٽائپ جو آفسيٽ ان جي ٽارگيٽ جي نسبت. وڌيڪ معلومات لاءِ ڏسو Popper.js جي آفسٽ ڊيڪس .
fallback جي جڳھ تار | صف 'ڦٽڻ' وضاحت ڪرڻ جي اجازت ڏيو ته پوپر ڪهڙي پوزيشن تي استعمال ڪندو. وڌيڪ معلومات لاءِ ڏسو Popper.js جي رويي جا دستاويز
حد تار | عنصر 'اسڪرول والدين' ٽول ٽائپ جي اوور فلو پابندي جي حد. 'viewport', , 'window', 'scrollParent', or an HTMLElement reference (صرف JavaScript) جا قدر قبول ڪري ٿو . وڌيڪ معلومات لاءِ ڏسو Popper.js's preventOverflow docs .

انفرادي ٽول ٽائپس لاءِ ڊيٽا جون خاصيتون

انفرادي ٽول ٽائپس جا اختيار متبادل طور تي بيان ڪري سگھجن ٿا ڊيٽا خاصيتن جي استعمال ذريعي، جيئن مٿي بيان ڪيو ويو آهي.

طريقا

هم وقت سازي طريقا ۽ منتقلي

سڀ API طريقا غير مطابقت رکندڙ آهن ۽ هڪ منتقلي شروع ڪن ٿا . اهي ڪالر ڏانهن موٽندا آهن جيئن ئي منتقلي شروع ٿئي ٿي پر ان کان اڳ ختم ٿي وڃي . ان کان علاوه، هڪ طريقو ڪال هڪ منتقلي جزو تي نظر انداز ڪيو ويندو .

وڌيڪ معلومات لاءِ اسان جا جاوا اسڪرپٽ دستاويز ڏسو.

$().tooltip(options)

هڪ ٽول ٽائپ هينڊلر کي هڪ عنصر گڏ ڪرڻ سان ڳنڍي ٿو.

.tooltip('show')

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

$('#element').tooltip('show')

.tooltip('hide')

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

$('#element').tooltip('hide')

.tooltip('toggle')

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

$('#element').tooltip('toggle')

.tooltip('dispose')

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

$('#element').tooltip('dispose')

.tooltip('enable')

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

$('#element').tooltip('enable')

.tooltip('disable')

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

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

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

$('#element').tooltip('toggleEnabled')

.tooltip('update')

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

$('#element').tooltip('update')

واقعا

واقعي جو قسم وصف
show.bs.tooltip اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن showمثال جو طريقو سڏيو ويندو آهي.
ڏيکاريو ويو.bs.tooltip هي واقعو فائر ڪيو ويو آهي جڏهن ٽول ٽائپ استعمال ڪندڙ کي ڏيکاريو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
hide.bs.tooltip اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن hideمثال جو طريقو سڏيو ويو آهي.
hidden.bs.tooltip هي واقعو فائر ڪيو ويندو آهي جڏهن ٽول ٽائپ ختم ٿي وئي آهي صارف کان لڪايو وڃي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
inserted.bs.tooltip هي واقعو ان واقعي کان پوءِ فائر ڪيو ويو آهي show.bs.tooltipجڏهن ٽول ٽائپ ٽيمپليٽ DOM ۾ شامل ڪيو ويو آهي. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})