Source

وسیلې

د ځایی سرلیک ذخیره کولو لپاره د متحرکاتو او ډیټا ځانګړتیاو لپاره د CSS3 په کارولو سره د CSS او JavaScript سره د دودیز بوټسټریپ اوزار ټیپونو اضافه کولو لپاره اسناد او مثالونه.

کتنه

هغه شیان چې تاسو باید پوه شئ کله چې د وسیلې ټایپ پلگ ان کاروئ:

  • وسیلې د موقعیت لپاره د دریمې ډلې کتابتون Popper.js باندې تکیه کوي . تاسو باید د bootstrap.js څخه مخکې popper.min.jsbootstrap.bundle.min.js شامل کړئ یا / bootstrap.bundle.jsکوم چې Popper.js لري د کار کولو لپاره د اوزار لارښوونو لپاره!
  • که تاسو زموږ جاواسکریپټ د سرچینې څخه جوړ کړئ، دا اړتیا لريutil.js .
  • Tooltips د فعالیت دلایلو لپاره غوره شوي، نو تاسو باید دوی پخپله پیل کړئ .
  • د صفر اوږدوالي سرلیکونو سره اوزار لارښوونې هیڅکله نه ښودل کیږي.
  • په ډیرو پیچلو برخو کې د ستونزو د وړاندې کولو څخه مخنیوي لپاره مشخص container: 'body'کړئ (لکه زموږ د ننوتلو ګروپونه، د تڼۍ ګروپونه، او نور).
  • په پټو عناصرو کې د وسیلې ټایپونه هڅول به کار ونکړي.
  • .disabledد وسیلې یا عناصرو لپاره وسیله disabledباید په یو ریپر عنصر کې پیل شي.
  • کله چې د هایپر لینکونو څخه رامینځته کیږي چې ډیری لینونه پراخوي، د اوزار لارښوونې به په مرکز کې وي. د دې چلند څخه د مخنیوي لپاره white-space: nowrap;په خپل s وکاروئ .<a>
  • Tooltips باید مخکې له دې چې د دوی اړوند عناصر د DOM څخه لیرې شي پټ شي.
  • Tooltips د سیوري DOM دننه د عنصر څخه مننه رامینځته کیدی شي.

د دې برخې د حرکت اغیز د prefers-reduced-motionرسنیو په پوښتنو پورې اړه لري. زموږ د لاسرسي اسنادو کم شوي حرکت برخه وګورئ .

دا ټول ترلاسه کړل؟ عالي ، راځئ وګورو چې دوی د ځینې مثالونو سره څنګه کار کوي.

بېلګه: هرچیرې د وسیلې لارښوونې فعال کړئ

په یوه پاڼه کې د ټولو وسیلو د پیل کولو یوه لاره به دا وي چې دوی د دوی د data-toggleځانګړتیاوو له مخې غوره کړي:

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

مثالونه

د وسیلې لارښوونو لیدو لپاره لاندې لینکونو ته ځیر شئ:

تنګ پتلون د بلې کچې کیفیه تاسو شاید د دوی په اړه نه وي اوریدلي. د عکس بوټ ږیره خام ډینم لیټرپریس ویگن میسنجر کڅوړه سټمپټاون. د فارم څخه میز سیتان، د میکسویني فکسي پایښت وړ quinoa 8-bit امریکایی پوښاک د ټیری ریچارډسن وینیل چیمبری لري . بیرډ سټمپټاون، کارډیګینس بنه می لومو تندر کیټس. توفو بایوډیزل ویلیامسبرګ مارفا، څلور لوکو مکسوینی کلینز ویګن چیمبری. یو ریښتیني اوسپنیز هنرمند هر څه چې کیتار ، سینسټر فارم څخه تر میز بانکي آسټین ټویټر هینډل فریګن کریډ خام ډینم واحد اصلي کافي ویروس.

د څلورو توکیو لارښوونو لیدلو لپاره لاندې بټونو ته ځړول: پورته، ښیې، ښکته او کیڼ.

<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

د Tooltip موقعیت هڅه کوي په اوتومات ډول بدلون ومومي کله چې یو اصلي کانټینر ولري overflow: autoیا overflow: scrollزموږ په څیر وي .table-responsive، مګر بیا هم د اصلي ځای پرځای کولو موقعیت ساتي. د حل کولو لپاره، boundaryاختیار د ډیفالټ ارزښت پرته بل څه ته وټاکئ 'scrollParent'، لکه 'window':

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

مارک اپ

د وسیلې ټایپ لپاره اړین مارک اپ یوازې یو dataخاصیت دی او titleپه HTML عنصر کې تاسو غواړئ د اوزار ټایپ ولرئ. د وسیلې ټایپ رامینځته شوی مارک اپ خورا ساده دی ، که څه هم دا موقعیت ته اړتیا لري (د ډیفالټ لخوا ، 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اختیارونه د ډیټا ځانګړتیاو په کارولو سره نشي چمتو کیدی.

نوم ډول ډیفالټ تفصیل
حرکت بولین ریښتیا وسیلې ته د CSS فیډ لیږد پلي کړئ
کانتینر تار | عنصر | دروغ دروغ

د وسیلې ټایپ یو ځانګړي عنصر ته ضمیمه کوي. بېلګه: container: 'body'. دا اختیار په ځانګړي ډول ګټور دی چې دا تاسو ته اجازه درکوي د سند په جریان کې د محرک عنصر ته نږدې د اوزار ټایپ ځای په ځای کړئ - کوم چې به د کړکۍ د بیا اندازې په جریان کې د وسیلې ټایپ د محرک عنصر څخه لرې تیریدو مخه ونیسي.
ځنډ شمیره | اعتراض 0

د وسیلې ټایپ ښودل او پټول ځنډول (ms) - د لارښود محرک ډول باندې نه پلي کیږي

که یوه شمیره ورکړل شي، ځنډ د پټولو / ښودلو لپاره کارول کیږي

د شیانو جوړښت دا دی:delay: { "show": 500, "hide": 100 }
html بولین دروغ

HTML ته په وسیلې کې اجازه ورکړئ.

که ریښتیا وي، په ټیپ کې د HTML ټاګونه titleبه په اوزار کې وړاندې شي. که غلط وي، د jQuery textمیتود به په DOM کې د مینځپانګې داخلولو لپاره وکارول شي.

متن وکاروئ که تاسو د XSS بریدونو په اړه اندیښمن یاست.
ځای پرځای کول تار | فعالیت 'پورته'

د وسیلې ټایپ موقعیت څنګه - auto | پورته | لاندې | پاتې | حق
کله autoچې مشخص شي، دا به په متحرک ډول د اوزار ټایپ بیا تنظیم کړي.

کله چې یو فنکشن د ځای پرځای کولو ټاکلو لپاره کارول کیږي، دا د لومړي دلیل په توګه د Tooltip 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.js offset docs ته مراجعه وکړئ .
fallback ځای پرځای کول تار | صف 'پلټ' اجازه راکړئ مشخص کړئ چې کوم موقعیت پوپر به په فال بیک کې وکاروي. د نورو معلوماتو لپاره د Popper.js د چلند اسنادو ته مراجعه وکړئ
سرحد تار | عنصر 'سکرول والدین' د وسیلې ټایپ د اوور فلو محدودیت حد. د 'viewport', 'window', 'scrollParent', یا د HTMLElement حواله (یوازې جاواسکریپټ) ارزښتونه مني. د لا زیاتو معلوماتو لپاره Popper.js's preventOverflow docs ته مراجعه وکړئ .
پاکول بولین ریښتیا پاکول فعال یا غیر فعال کړئ. که فعال شي 'template'او 'title'اختیارونه به پاک شي.
سپین لیست اعتراض ډیفالټ ارزښت هغه اعتراض چې اجازه ورکړل شوي ځانګړتیاوې او ټاګونه لري
sanitizeFn null | فعالیت null دلته تاسو کولی شئ خپل د پاکولو فعالیت وړاندې کړئ. دا ګټور کیدی شي که تاسو د حفظ الصحې ترسره کولو لپاره وقف شوي کتابتون څخه کار واخلئ.
popperConfig null | اعتراض null د Bootstrap د ډیفالټ Popper.js ترتیب بدلولو لپاره، د Popper.js ترتیب وګورئ

د انفرادي وسیلو لپاره د معلوماتو ځانګړتیاوې

د انفرادي توکیو لپاره اختیارونه په بدیل سره د ډیټا ځانګړتیاو کارولو له لارې مشخص کیدی شي، لکه څنګه چې پورته تشریح شوي.

میتودونه

غیر متناسب میتودونه او لیږدونه

ټولې 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')

د یو عنصر اوزار ټایپ د ښودلو وړتیا ورکوي. Tooltips د ډیفالټ په واسطه فعال شوي.

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

.tooltip('disable')

د یو عنصر د وسیلې ټایپ ښودلو وړتیا لرې کوي. د وسیلې ټایپ به یوازې د ښودلو وړ وي که چیرې دا بیا فعاله شي.

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

.tooltip('toggleEnabled')

د یو عنصر د وسیلې ټایپ د ښودلو یا پټولو وړتیا بدلوي.

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

.tooltip('update')

د عنصر د وسیلې ټیپ موقعیت تازه کوي.

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

پیښې

د پیښې ډول تفصیل
show.bs.tooltip دا پیښه سمدلاسه اوریږي کله چې د showمثال میتود ویل کیږي.
ښودل شوی.bs.tooltip دا پیښه له مینځه وړل کیږي کله چې د وسیلې ټایپ کارونکي ته ښکاره شي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
hide.bs.tooltip دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د hideمثال میتود ویل کیږي.
hidden.bs.tooltip دا پیښه له مینځه وړل کیږي کله چې د وسیلې ټایپ د کارونکي څخه پټ شوی وي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
inserted.bs.tooltip دا پیښه د show.bs.tooltipپیښې وروسته له مینځه وړل کیږي کله چې د اوزار ټایپ ټیمپلیټ DOM ته اضافه شوی وي. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})