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 څخه لیرې شي پټ شي.

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

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

په یوه پاڼه کې د ټولو وسیلو د پیل کولو یوه لاره به دا وي چې دوی د دوی د 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="".

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

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

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

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

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

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

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

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

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

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

د یو عنصر اوزار ټایپ د ښودلو وړتیا ورکوي. 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…
})