اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړشئ
in English

وسیلې

د سی ایس ایس او جاواسکریپټ سره د سی ایس ایس 3 په کارولو سره د ځایی سرلیک ذخیره کولو لپاره د متحرکاتو او ډیټا-BS-خصوصیتونو لپاره د دودیز بوټسټریپ اوزار اضافه کولو لپاره اسناد او مثالونه.

کتنه

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

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

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

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

په یوه پاڼه کې د ټولو وسیلو د پیل کولو یوه لاره به دا وي چې دوی د دوی د 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 کې د بوټسټریپ کارولو په وخت کې لارښوونې منعکس کیږي.

<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)
اووربه autoاوscroll

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

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

مارک اپ

د وسیلې ټایپ لپاره اړین مارک اپ یوازې یو dataخاصیت دی او titleپه HTML عنصر کې تاسو غواړئ د اوزار ټایپ ولرئ. د وسیلې ټایپ رامینځته شوی مارک اپ خورا ساده دی ، که څه هم دا موقعیت ته اړتیا لري (د ډیفالټ لخوا ، topد پلگ ان لخوا ټاکل شوی).

د کیبورډ او مرستندویه ټیکنالوژۍ کاروونکو لپاره د وسیلې لارښوونې کار کول

تاسو باید یوازې د HTML عناصرو لپاره اوزار لارښوونې اضافه کړئ چې په دودیز ډول د کیبورډ تمرکز وړ او متقابل وي (لکه لینکونه یا فارم کنټرولونه). که څه هم خپلمنځي HTML عناصر (لکه <span>s) د ځانګړتیا په اضافه کولو سره د تمرکز وړ کیدی شي tabindex="0"، دا به د کیبورډ کاروونکو لپاره غیر متقابل عناصرو کې احتمالي ځورونکي او مغشوشونکي ټب سټاپونه اضافه کړي ، او ډیری مرستندویه ټیکنالوژي اوس مهال پدې حالت کې د وسیلې ټایپ نه اعلانوي. برسیره پردې، یوازې د خپل اوزار ټایپ لپاره د محرک په توګه تکیه مه کوئ hover، ځکه چې دا به ستاسو د وسیلې لارښوونې د کیبورډ کاروونکو لپاره ناشونی کړي.

<!-- 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="". ډاډ ترلاسه کړئ چې د اختیار نوم د قضیې ډول د CamelCase څخه کباب-کیس ته بدل کړئ کله چې اختیارونه د ډیټا ځانګړتیاو له لارې تیریږي. د مثال په توګه، د کارولو پرځای data-bs-customClass="beautifier"، وکاروئ data-bs-custom-class="beautifier".

په یاد ولرئ چې د امنیتي دلایلو لپاره sanitize، sanitizeFn، او allowListاختیارونه د ډیټا ځانګړتیاو په کارولو سره نشي چمتو کیدی.
نوم ډول ډیفالټ تفصیل
animation بولین true وسیلې ته د CSS فیډ لیږد پلي کړئ
container تار | عنصر | دروغ false

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

delay شمیره | اعتراض 0

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

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

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

html بولین false

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

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

متن وکاروئ که تاسو د XSS بریدونو په اړه اندیښمن یاست.

placement تار | فعالیت 'top'

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

کله چې یو فنکشن د ځای پرځای کولو ټاکلو لپاره کارول کیږي، دا د لومړي دلیل په توګه د Tooltip DOM نوډ سره او د محرک عنصر DOM نوډ د دویم په توګه ویل کیږي. thisشرایط د اوزار ټایپ مثال ته ټاکل شوي .

selector تار | دروغ false که یو انتخاب کونکی چمتو شي، د اوزار ټایپ توکي به ټاکل شوي هدفونو ته واستول شي. په عمل کې، دا په متحرک ډول اضافه شوي DOM عناصرو ( jQuery.onملاتړ) ته د وسیلې لارښوونې پلي کولو لپاره هم کارول کیږي. دا او یو معلوماتي مثال وګورئ .
template تار '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

د وسیلې ټایپ رامینځته کولو پرمهال د کارولو لپاره اساس HTML.

د وسیلې ټایپ titleبه په کې داخل شي .tooltip-inner.

.tooltip-arrowد وسیلې د تیر تیر شي.

ترټولو بهرنۍ ریپر عنصر باید .tooltipټولګي ولري او role="tooltip".

title تار | عنصر | فعالیت ''

د اصلي سرلیک ارزښت که چیرې titleخاصیت موجود نه وي.

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

trigger تار 'hover focus'

د وسیلې ټایپ څنګه پیل کیږي - کلیک | هور | تمرکز | لارښود تاسو ممکن ډیری محرکونه تیر کړئ؛ دوی د ځای سره جلا کړئ.

'manual'.show()دا په ګوته کوي چې د وسیلې ټایپ به په برنامه توګه د , .hide()او .toggle()میتودونو له لارې رامینځته شي . دا ارزښت د کوم بل محرک سره یوځای کیدی نشي.

'hover'پخپله به د وسیلې لارښوونو پایله ولري چې د کیبورډ له لارې نشي رامینځته کیدی ، او یوازې باید وکارول شي که چیرې د کیبورډ کاروونکو لپاره د ورته معلوماتو رسولو لپاره بدیل میتودونه شتون ولري.

fallbackPlacements صف ['top', 'right', 'bottom', 'left'] په صف کې د ځای پرځای کولو لیست چمتو کولو له لارې د بیرته راستنیدو ځای په ځای کولو تعریف کړئ (د غوره توب له مخې). د لا زیاتو معلوماتو لپاره د Popper د چلند اسنادو ته مراجعه وکړئ
boundary تار | عنصر 'clippingParents' د وسیلې ټایپ د اوور فلو محدودیت حد (یوازې د پوپر د مخنیوي اوور فلو ترمیم کونکي باندې پلي کیږي). په ډیفالټ دا دی 'clippingParents'او کولی شي د HTMLElement حواله ومني (یوازې د جاواسکریپټ له لارې). د نورو معلوماتو لپاره د Popper's detectOverflow اسنادو ته مراجعه وکړئ .
customClass تار | فعالیت ''

د وسیلې ټایپ ته ټولګي اضافه کړئ کله چې دا ښودل کیږي. په یاد ولرئ چې دا ټولګي به د ټیمپلیټ کې مشخص شوي ټولګیو سربیره اضافه شي. د ډیری ټولګیو اضافه کولو لپاره، دوی د ځایونو سره جلا کړئ: 'class-1 class-2'.

تاسو کولی شئ یو فنکشن هم تیر کړئ چې باید یو واحد تار بیرته راولي چې اضافي ټولګي نومونه لري.

sanitize بولین true پاکول فعال یا غیر فعال کړئ. که فعال شي 'template'او 'title'اختیارونه به پاک شي. زموږ د جاواسکریپټ اسنادو کې د پاکولو برخه وګورئ .
allowList اعتراض ډیفالټ ارزښت هغه اعتراض چې اجازه ورکړل شوي ځانګړتیاوې او ټاګونه لري
sanitizeFn null | فعالیت null دلته تاسو کولی شئ خپل د حفظ الصحې فعالیت وړاندې کړئ. دا ګټور کیدی شي که تاسو د حفظ الصحې ترسره کولو لپاره وقف شوي کتابتون څخه کار واخلئ.
offset صف | تار | فعالیت [0, 0]

د دې هدف په پرتله د وسیلې ټایپ آفسیټ. تاسو کولی شئ د کوما جلا شوي ارزښتونو سره د ډیټا ځانګړتیاو کې تار تیر کړئ لکه:data-bs-offset="10,20"

کله چې یو فنکشن د آفسیټ ټاکلو لپاره کارول کیږي، دا د هغه څیز سره ویل کیږي چې د پاپر ځای پرځای کول، حواله، او پاپر د لومړي دلیل په توګه بیاکتنه کوي. د محرک عنصر DOM نوډ د دوهم دلیل په توګه تیریږي. فنکشن باید د دوه شمیرو سره یو صف بیرته راولي: .[skidding, distance]

د لا زیاتو معلوماتو لپاره د Popper's offset docs ته مراجعه وکړئ .

popperConfig null | څيز | فعالیت null

د بوټسټریپ ډیفالټ پوپر ترتیب بدلولو لپاره ، د پوپر ترتیب وګورئ .

کله چې یو فنکشن د پوپر ترتیب رامینځته کولو لپاره کارول کیږي، دا د هغه څیز سره ویل کیږي چې د بوټسټریپ ډیفالټ پاپر ترتیب لري. دا تاسو سره مرسته کوي چې ستاسو د خپل ترتیب سره ډیفالټ وکاروئ او یوځای کړئ. فنکشن باید د پوپر لپاره د ترتیب کولو څیز بیرته راولي.

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

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

سره د فنکشن کارولpopperConfig

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

میتودونه

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

ټولې API میتودونه غیر متزلزل دي او لیږد پیل کوي . کله چې لیږد پیل شي دوی بیرته زنګ وهونکي ته بیرته راځي مګر مخکې له دې چې پای ته ورسیږي . برسېره پردې، د لیږدونکي برخې په اړه د میتود غوښتنې به له پامه غورځول شي .

د نورو معلوماتو لپاره زموږ جاواسکریپټ اسناد وګورئ .

ښودل

د عنصر وسیله ټیپ څرګندوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې د وسیلې ټایپ واقعیا وښودل شي (یعنې مخکې له دې چې shown.bs.tooltipپیښه پیښ شي). دا د وسیلې ټایپ "دستی" محرک ګڼل کیږي. د صفر اوږدوالي سرلیکونو سره اوزار لارښوونې هیڅکله نه ښودل کیږي.

tooltip.show()

پټول

د یو عنصر وسیله ټیپ پټوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې د وسیلې ټایپ واقعیا پټ شوی وي (یعنې مخکې له دې چې hidden.bs.tooltipپیښه پیښ شي). دا د وسیلې ټایپ "دستی" محرک ګڼل کیږي.

tooltip.hide()

بدلول

د یو عنصر د وسیلې ټاپ ټګل کوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې د وسیلې ټایپ واقعیا ښودل شوي یا پټ شوي وي (د بیلګې په توګه مخکې لدې چې پیښه shown.bs.tooltipیا hidden.bs.tooltipپیښه پیښ شي). دا د وسیلې ټایپ "دستی" محرک ګڼل کیږي.

tooltip.toggle()

تصفیه کول

د عنصر اوزار ټیپ پټوي او له مینځه وړي (د DOM عنصر کې زیرمه شوي ډاټا لرې کوي). وسیلې لارښوونې چې پلاوي کاروي (کوم چې د selectorاختیار په کارولو سره رامینځته شوي ) نشي کولی په انفرادي ډول د نسل محرک عناصرو له مینځه ویسي.

tooltip.dispose()

فعالول

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

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

پیښې

د پیښې ډول تفصیل
show.bs.tooltip دا پیښه سمدلاسه اوریږي کله چې د showمثال میتود ویل کیږي.
shown.bs.tooltip دا پیښه له مینځه وړل کیږي کله چې د وسیلې ټایپ کارونکي ته ښکاره شي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
hide.bs.tooltip دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د hideمثال میتود ویل کیږي.
hidden.bs.tooltip دا پیښه له مینځه وړل کیږي کله چې د وسیلې ټایپ د کارونکي څخه پټ شوی وي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
inserted.bs.tooltip دا پیښه د show.bs.tooltipپیښې وروسته له مینځه وړل کیږي کله چې د اوزار ټایپ ټیمپلیټ DOM ته اضافه شوی وي.
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()