وسیلې

کتنه

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

• وسیلې د موقعیت لپاره د دریمې ډلې کتابتون پوپر تکیه کوي . تاسو باید د 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 دننه د عنصر څخه مننه رامینځته کیدی شي.

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

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

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

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

مارک اپ

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

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

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

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

میتودونه

ښودل

د عنصر وسیله ټیپ څرګندوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې د وسیلې ټایپ واقعیا وښودل شي (یعنې مخکې له دې چې 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

پیښې

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()