Source

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

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

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

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

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

کاریگەری ئەنیمەیشنی ئەم پێکهاتەیە وابەستەی prefers-reduced-motionپرسیاری میدیایە. سەیری بەشی جووڵەی کەمکراوە بکە لە بەڵگەنامەکانی دەستڕاگەیشتنمان .

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

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

یەکێک لە ڕێگاکان بۆ دەستپێکردنی هەموو ئامۆژگارییەکان لە لاپەڕەیەکدا ئەوەیە کە بەپێی تایبەتمەندییەکانیان هەڵیانبژێریت data-toggle:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

نموونە

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

پانتۆڵی توند ئاستی داهاتوو keffiyeh ڕەنگە نەتبیستبێت. کۆشکی وێنە سمێڵ خام جینز لێتەرپرێس جانتای نامەبەری ڤیگن stumptown. کێڵگە بۆ مێز seitan، mcsweeney's fixie بەردەوام quinoa 8-bit جل و بەرگی ئەمریکی خاوەنی تێری ڕیچاردسۆن ڤینێل chambray. سمێڵ ستۆمپتاون، کاردیگانەکان بانه می لۆمۆ ڕەشەبا پشیلە. تۆفۆ بایۆدیزەل ویلیامزبێرگ مارفا، چوار loko mcsweeney's پاککردنەوەی ڤیگن chambray. بەڕاستی پیشەسازێکی ئیرۆنی هەرچییەک بێت keytar , scenester کێڵگە-بۆ-مێز banksy ئاوستی تویتەر دەست freegan cred خاو جینز تاکە سەرچاوە قاوە ڤایرۆس.

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

<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 ی توخمە دەستپێکەر وەک ئارگومێنتی دووەم دەگوازرێتەوە.

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

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

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

شێوازەکان

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

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