ئامۆژگاری ئامرازەکان

تێڕوانینێکی گشتی

ئەو شتانەی کە پێویستە بزانیت لە کاتی بەکارهێنانی پێوەکراوەکەی tooltip:

• ئامرازەکان پشت بە کتێبخانەی لایەنی سێیەم Popper دەبەستن بۆ جێگیرکردن. پێویستە پێش bootstrap.js popper.min.js دابنێیت یان bootstrap.bundle.min.js/ بەکاربهێنیت bootstrap.bundle.jsکە Popper لەخۆدەگرێت بۆ ئەوەی ئامرازەکان کاربکەن!
• ئامۆژگاری ئامرازەکان بەهۆی کاراییەوە بەشداریکردنن، بۆیە دەبێت خۆت سەرەتایییان بکەیت .
• ئەو ئامرازانەی کە ناونیشانەکانیان درێژی سفرە هەرگیز پیشان نادرێن.
• دیاری بکە container: 'body'بۆ ئەوەی کێشەی ڕەندەرکردن لە پێکهاتە ئاڵۆزترەکاندا ڕوونەدات (وەک گروپەکانی چوونەژوورەوەمان، گروپەکانی دوگمەکان و هتد).
• دەستپێکردنی ئامرازەکان لەسەر توخمە شاراوەکان کار ناکات.
• ئامۆژگاری ئامرازەکان بۆ .disabledیان disabledتوخمەکان دەبێت لەسەر توخمێکی پێچراو دەستپێبکرێن.
• کاتێک لە هایپەرلینکەکانەوە دەستپێدەکات کە چەند دێڕێک دەگرێتەوە، ئامرازەکان لە ناوەند دەبن. white-space: nowrap;لەسەر s ـەکەت بەکاربهێنە <a>بۆ ئەوەی لەم ڕەفتارە دوور بکەویتەوە.
• پێویستە ئامۆژگارییەکانی ئامرازەکان بشاردرێنەوە پێش ئەوەی توخمە هاوبەشەکانیان لە DOM لاببرێن.
• دەتوانرێت ئامرازەکان بەهۆی توخمێکەوە لەناو 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)
})

نموونە

بۆ بینینی ئامۆژگاری ئامرازەکان، ماوسەکەت لەسەر ئەم بەستەرانەی خوارەوە دابنێ:

ماوسەکەت لەسەر دوگمەکانی خوارەوە دابنێ بۆ بینینی ئاراستەی چوار ئامۆژگاری ئامرازەکان: سەرەوە، ڕاست، خوارەوە و چەپ. ڕێنماییەکان لە کاتی بەکارهێنانی Bootstrap لە 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 بۆ kebab-case لە کاتی تێپەڕاندنی هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا. بۆ نموونە لەبری بەکارهێنانی 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()

toggle بکە

ئامۆژگاری ئامرازی توخمێک دەگۆڕێت. پێش ئەوەی ئامۆژگاری ئامرازەکە لە ڕاستیدا پیشان بدرێت یان بشاردرێتەوە دەگەڕێتەوە بۆ پەیوەندیکەر (واتە پێش ئەوەی ڕووداوی shown.bs.tooltipیان hidden.bs.tooltipڕووبدات). ئە��ەش بە دەستپێکردنی "دەستی" ئامۆژگاری ئامرازەکە دادەنرێت.

tooltip.toggle()

فڕێ بدە

ئامۆژگاری ئامرازی توخمێک دەشارێتەوە و لەناو دەبات (داتا هەڵگیراوەکان لەسەر توخمەکەی DOM لا دەبات). ئەو ئامرازانەی کە نوێنەرایەتی بەکاردەهێنن (کە بە بەکارهێنانی هەڵبژاردەی دروست دەکرێن ) selectorناتوانرێت بە تاک لەسەر توخمەکانی دەستپێکەری نەوە لەناوببرێن.

tooltip.dispose()

چالاک کردن

توانای پیشاندانی بە ئامرازی توخمێک دەدات. ئامرازەکان بە شێوازی پێشوەختە چالاک دەکرێن.

tooltip.enable()

ناچالاک کردن

توانای نیشاندانی ئامرازی توخمێک لا دەبات. ئامرازەکە تەنها لە حاڵەتێکدا دەتوانرێت پیشان بدرێت کە دووبارە چالاک بکرێتەوە.

tooltip.disable()

toggleEnabled کراوە

توانای نیشاندانی ئامرازی توخمێک دەگۆڕێت یان بشاردرێتەوە.

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()