in English

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

بەڵگەنامە و نموونە بۆ زیادکردنی ئامرازەکانی Bootstrap تایبەت بە CSS و JavaScript بە بەکارهێنانی CSS3 بۆ ئەنیمەیشن و تایبەتمەندی داتا بۆ هەڵگرتنی ناونیشانی ناوخۆیی.

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

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

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

هەموو ئەوانەت دەستکەوتووە؟ زۆر باشە، با بزانین چۆن کاردەکەن بە چەند نموونەیەک.

نموونە: لە هەموو شوێنێک ئامرازەکان چالاک بکە

یەکێک لە ڕێگاکانی دەستپێکردنی هەموو ئامۆژگارییەکان لە لاپەڕەیەکدا ئەوەیە کە بەپێی تایبەتمەندییەکانیان هەڵیانبژێریت 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)
ڕژان 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="".

تێبینی بکە کە لەبەر هۆکاری ئاسایش ناتوانرێت هەڵبژاردەکانی sanitize, sanitizeFnو بە بەکارهێنانی تایبەتمەندییەکانی داتا دابین بکرێت.whiteList
ناو جۆر بنەڕەتی وەسف
ئەنیمەیشن boolean ڕاست گواستنەوەی کاڵبوونەوەی CSS بۆ ئامرازەکە جێبەجێ بکە
دەفرێک ڕستە | توخم | هەڵە هەڵە

ئامۆژگاری ئامرازەکە بە توخمێکی دیاریکراوەوە دەبەستێتەوە. نموونە: container: 'body'. ئەم هەڵبژاردنە بە تایبەتی بەسوودە لەوەی کە ڕێگەت پێدەدات نوکی ئامرازەکە لە ڕەوتی بەڵگەنامەکەدا لە نزیک توخمە دەستپێکەرەکە دابنێیت - کە ڕێگری دەکات لە هەڵفڕینی نوکی ئامرازەکە لە توخمە دەستپێکەرەکە لە کاتی گۆڕینی قەبارەی پەنجەرەدا.
دواخستن ژمارە | شت 0. 0

دواکەوتنی پیشاندانی و شاردنەوەی ئامۆژگاری ئامرازەکان (ms) - جۆری دەستپێکەری دەستی ناگرێتەوە

ئەگەر ژمارەیەک دابین کرا، دواکەوتن بۆ هەردوو شاردنەوە/نمایشکردن جێبەجێ دەکرێت

پێکهاتەی شت بریتییە لە:delay: { "show": 500, "hide": 100 }
html boolean هەڵە

لە ئامرازەکەدا ڕێگە بە HTML بدە.

ئەگەر ڕاست بێت، تاگەکانی HTML لە tooltip's لە tooltip's ڕەندەر titleدەکرێن. ئەگەر هەڵە بێت، textشێوازی jQuery بەکاردەهێنرێت بۆ دانانی ناوەڕۆک لە DOM.

ئەگەر نیگەرانیت لە هێرشەکانی XSS دەق بەکاربهێنە.
جێگیرکردن ڕستە | کردار 'سەروو'

چۆنێتی جێگیرکردنی ئامرازەکان - auto | سەرەوە | خوارەوە | چەپ | ڕاست.
کاتێک autoدیاری دەکرێت، بە شێوەیەکی داینامیکی ئامۆژگاری ئامرازەکە دەکاتەوە.

کاتێک فەنکشنێک بەکاردەهێنرێت بۆ دیاریکردنی شوێنەکە، بانگ دەکرێت بە گرێی DOMی ئامرازی وەک یەکەم ئارگومێنت و توخمە دەستپێکەرەکە گرێی DOM وەک دووەم. کۆنتێکستەکە thisلەسەر نموونەی ئامرازەکان دانراوە.
هەڵبژێرەر ڕستە | هەڵە هەڵە ئەگەر هەڵبژێرەرێک دابین بکرێت، شتەکانی ئامۆژگاری ئامرازەکان دەدرێنە ئامانجە دیاریکراوەکان. لە پراکتیکدا، ئەمە بەکاردێت بۆ هەروەها جێبەجێکردنی ئامۆژگاری ئامرازەکان بۆ توخمەکانی DOM زیادکراوی داینامیکی ( jQuery.onپشتگیری). ئەمە و نموونەیەکی زانیاری ببینە .
قاڵب ڕستە '<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کۆمەڵە ئاماژەیەکەی بۆ ئەو توخمە کە ئامرازەکە پێیەوە بەستراوەتەوە.
وورژاندن ڕستە 'hover focus'

چۆن tooltip دەستپێدەکات - کلیک لە | بکە hover | فۆکەس | بەدەستی. لەوانەیە چەندین تریگەر تێپەڕێنیت؛ بە بۆشایییەک جیایان بکەرەوە.

'manual'ئاماژە بەوە دەکات کە ئامرازەکە بە شێوەیەکی بەرنامەیی لە ڕێگەی .tooltip('show'), .tooltip('hide')و .tooltip('toggle')شێوازەکانەوە دەستپێدەکات؛ ئەم بەهایە ناتوانرێت لەگەڵ هیچ تریگەرێکی تردا تێکەڵ بکرێت.

'hover'بە تەنیا دەبێتە هۆی ئامۆژگاری ئامرازەکان کە ناتوانرێت لە ڕێگەی کیبۆردەوە دەستپێبکرێت، و تەنها پێویستە بەکاربهێنرێت کە ڕێگەی بەدیل بۆ گەیاندنی هەمان زانیاری بۆ بەکارهێنەرانی کیبۆرد ئامادە بێت.
ئۆفسێت ژمارە | ڕستە | کردار 0. 0

ئۆفسێتی ئامرازەکە بە بەراورد بە ئامانجەکەی.

کاتێک فەنکشنێک بەکاردێت بۆ دیاریکردنی ئۆفسێتەکە، بە ئۆبجێکتیک بانگ دەکرێت کە داتاکانی ئۆفسێتەکەی تێدایە وەک یەکەم ئارگومێنتەکەی. فەنکشنەکە دەبێت ئۆبجێکتیک بگەڕێنێتەوە کە هەمان پێکهاتەی هەبێت. گرێی DOM ی توخمە دەستپێکەر وەک ئارگومێنتی دووەم دەگوازرێتەوە.

بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی ئۆفسێتی پۆپەر بکە .
fallback جێگیرکردن ڕستە | ڕیزبەندی 'وەرگەڕاندن' ڕێگە بدە دیاری بکەیت کە پۆپەر لە فۆڵباکدا کام پۆست بەکاردەهێنێت. بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی هەڵسوکەوتی پۆپەر بکە
customClass ڕستە | کردار ''

کاتێک پیشان دەدرێت پۆلەکان زیاد بکە بۆ ئامرازەکە. تێبینی بکە کە ئەم پۆلانە زیاد دەکرێن جگە لە هەر پۆلێک کە لە قاڵبەکەدا دیاری کراوە. بۆ زیادکردنی چەندین پۆل، بە بۆشایی جیایان بکەرەوە: 'a b'.

هەروەها دەتوانیت فەنکشنێک تێپەڕێنیت کە دەبێت یەک ڕستە بگەڕێنێتەوە کە ناوی پۆلی زیادەی تێدایە.
سنوور ڕستە | پێکهاتە 'scrollParent' سنووری سنووردارکردنی ڕژانی ئامۆژگاری. بەهاکانی 'viewport', 'window', 'scrollParent', یان ئاماژەیەکی HTMLElement قبوڵ دەکات (تەنها جاڤاسکڕێپت). بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی preventOverflow ی Popper بکە .
پاککردنەوە boolean ڕاست پاککردنەوەکە چالاک یان ناچالاک بکە. ئەگەر چالاک بێت 'template'و 'title'بژاردەکان پاک دەکرێنەوە. سەیری بەشی پاککەرەوە بکە لە بەڵگەنامەکانی جاڤاسکڕێپتەکەماندا .
لیستی سپی شت بةهاى دواكةوتن شتێک کە تایبەتمەندی و تاگی ڕێگەپێدراو لەخۆدەگرێت
sanitizeFn پووچ | کردار هیچ لێرەدا دەتوانیت کارایی پاککردنەوەی خۆت دابین بکەیت. ئەمە دەتوانێت بەسوود بێت ئەگەر پێت باشە کتێبخانەی تایبەت بەکاربهێنیت بۆ ئەنجامدانی پاکوخاوێنی.
popperConfig پووچ | شت هیچ بۆ گۆڕینی ڕێکخستنی پێشوەختەی Popper ی Bootstrap، سەیری ڕێکخستنی Popper بکە

تایبەتمەندیەکانی داتا بۆ ئامۆژگاری تاکەکەسی

دەتوانرێت بژاردەکان بۆ ئامۆژگارییە تاکەکەسییەکان بە شێوەیەکی جێگرەوە لە ڕێگەی بەکارهێنانی تایبەتمەندییەکانی داتاوە دیاری بکرێت، وەک لە سەرەوە ڕوون کراوەتەوە.

شێوازەکان

شێواز و گواستنەوە ناهاوسەنگەکان

هەموو شێوازەکانی 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')

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

$('#element').tooltip('enable')

.tooltip('disable')

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

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

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

$('#element').tooltip('toggleEnabled')

.tooltip('update')

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

$('#element').tooltip('update')

ڕووداوەکان

جۆری ڕووداو وەسف
نیشاندانی ئامۆژگاری.bs ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک showشێوازی نموونە بانگ دەکرێت.
نیشان دراوە.bs.tooltip ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە ئامۆژگاری ئامرازەکە بۆ بەکارهێنەر دیار کراوە (چاوەڕێی تەواوبوونی گواستنەوەکانی CSS دەکات).
hide.bs.تول ئامۆژگاری ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hideشێوازی نموونە بانگ کراوە.
hidden.bs.ئامۆژگاری ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە ئامۆژگاری ئامێرەکە تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕێ دەکات بۆ تەواوبوونی گواستنەوەکانی CSS).
inserted.bs.ئامۆژگاری ئامرازەکان ئەم ڕووداوە دوای show.bs.tooltipڕووداوەکە کاتێک قاڵبی ئامۆژگاری ئامرازەکان بۆ DOM زیاد کراوە، ئاگر دەکرێتەوە. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})