وسیلې

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

کتنه

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

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

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

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

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

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

مارک اپ

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

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

میتودونه

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

پیښې

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})