in English

ٽول ٽِپ

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

اوسر

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

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

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

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

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

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

مثال

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

جڳھ ھولڊر ٽيڪسٽ ٽول ٽائپس سان گڏ ڪجھ ان لائن لنڪ ڏيکارڻ لاءِ . اهو هاڻي صرف ڀريندڙ آهي، نه قاتل. مواد هتي رکيل آهي صرف حقيقي متن جي موجودگي کي نقل ڪرڻ لاءِ . ۽ اهو سڀ ڪجهه صرف توهان کي هڪ خيال ڏيڻ لاءِ ته ٽول ٽائپس ڪيئن نظر اينديون جڏهن حقيقي دنيا جي حالتن ۾ استعمال ٿينديون. تنهن ڪري اميد آهي ته توهان هاڻي ڏٺو آهي ته لنڪ تي اهي ٽول ٽائپس ڪيئن ڪم ڪري سگهن ٿيون، هڪ دفعو توهان انهن کي پنهنجي سائيٽ يا پروجيڪٽ تي استعمال ڪريو.

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

<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="".

نوٽ ڪريو ته سيڪيورٽي سببن لاء sanitize، sanitizeFn۽ whiteListاختيارن کي مهيا نه ٿو ڪري سگھجي ڊيٽا خاصيتون استعمال ڪندي.
نالو قسم ڊفالٽ وصف
انيميشن بولين سچو ٽول ٽائپ تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو
ڪنٽينر تار | عنصر | ڪوڙو ڪوڙو

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

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

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

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

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

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

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

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

جڏهن هڪ فنڪشن استعمال ڪيو ويندو آهي جڳهه کي طئي ڪرڻ لاء، ان کي سڏيو ويندو آهي ٽول ٽائپ DOM نوڊ ان جي پهرين دليل جي طور تي ۽ محرڪ عنصر DOM نوڊ ان جي سيڪنڊ طور. thisحوالو ٽول ٽائپ مثال تي مقرر ڪيو ويو آهي .
چونڊيندڙ تار | ڪوڙو ڪوڙو جيڪڏهن هڪ چونڊيندڙ مهيا ڪيو ويو آهي، ٽول ٽائپ شيون مقرر ڪيل هدفن ڏانهن موڪليا ويندا. عملي طور تي، اهو پڻ استعمال ڪيو ويندو آهي ٽول ٽائپس کي متحرڪ طور تي شامل ڪيل DOM عناصر ( jQuery.onسپورٽ). هي ڏسو ۽ هڪ معلوماتي مثال .
ٽيمپليٽ تار '<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

ان جي ھدف سان لاڳاپيل ٽول ٽائپ جو آفسیٹ.

جڏهن هڪ فنڪشن استعمال ڪيو ويندو آهي آفسيٽ کي طئي ڪرڻ لاء، اهو هڪ اعتراض سان سڏيو ويندو آهي جنهن ۾ آفسٽ ڊيٽا شامل آهي ان جي پهرين دليل طور. فنڪشن کي ساڳيو ڍانچي سان هڪ اعتراض واپس ڪرڻ گهرجي. ٽاريندڙ عنصر DOM نوڊ ٻئي دليل طور منظور ڪيو ويو آهي.

وڌيڪ معلومات لاءِ ڏسو Popper's offset docs .
fallback جي جڳھ تار | صف 'ڦٽڻ' وضاحت ڪرڻ جي اجازت ڏيو ته پوپر ڪهڙي پوزيشن تي استعمال ڪندو. وڌيڪ معلومات لاءِ ڏسو پوپر جي رويي جا دستاويز
ڪسٽم ڪلاس تار | فنڪشن ''

ٽول ٽائپ ۾ ڪلاس شامل ڪريو جڏھن اھو ڏيکاريل آھي. ياد رهي ته اهي ڪلاس شامل ڪيا ويندا ڪنهن به طبقن کان علاوه ٽيمپليٽ ۾ بيان ڪيل. گھڻن طبقن کي شامل ڪرڻ لاء، انھن کي خالن سان الڳ ڪريو: 'a b'.

توھان ھڪڙو فنڪشن پڻ پاس ڪري سگھو ٿا جيڪو ھڪڙي اسٽرنگ کي واپس ڪرڻ گھرجي جنھن ۾ اضافي ڪلاس جا نالا شامل آھن.
حد تار | عنصر 'اسڪرول والدين' ٽول ٽائپ جي اوور فلو پابندي جي حد. 'viewport', , 'window', 'scrollParent', or an HTMLElement reference (صرف JavaScript) جا قدر قبول ڪري ٿو . وڌيڪ معلومات لاءِ ڏسو Popper's preventOverflow docs .
صفائي ڪرڻ بولين سچو صفائي کي فعال يا غير فعال ڪريو. جيڪڏهن چالو ڪيو ويندو 'template'۽ 'title'اختيارن کي صاف ڪيو ويندو. اسان جي جاوا اسڪرپٽ دستاويزن ۾ صاف ڪرڻ وارو سيڪشن ڏسو .
وائيٽ لسٽ اعتراض ڊفالٽ قدر اعتراض جنهن ۾ اجازت ڏنل خاصيتون ۽ ٽيگ شامل آهن
sanitizeFn null | فنڪشن null هتي توهان پنهنجي صفائي واري فنڪشن کي فراهم ڪري سگهو ٿا. اهو ڪارائتو ٿي سگهي ٿو جيڪڏهن توهان صفائي ڪرڻ لاءِ وقف ٿيل لائبريري استعمال ڪرڻ چاهيندا آهيو.
popperConfig null | اعتراض null Bootstrap جي ڊفالٽ Popper config کي تبديل ڪرڻ لاء، Popper جي ترتيب ڏسو

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

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

طريقا

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

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

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

$().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...
})