ئامۆژگاری ئامرازەکان
بەڵگەنامە و نموونە بۆ زیادکردنی ئامرازەکانی Bootstrap تایبەت بە CSS و JavaScript بە بەکارهێنانی CSS3 بۆ ئەنیمەیشن و data-bs-attributes بۆ هەڵگرتنی ناونیشانی ناوخۆیی.
تێڕوانینێکی گشتی
ئەو شتانەی کە پێویستە بزانیت لە کاتی بەکارهێنانی پێوەکراوەکەی 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ی سێبەردا دەستپێبکرێت.
prefers-reduced-motion
پرسیاری میدیایە. سەیری
بەشی جووڵەی کەمکراوە بکە لە بەڵگەنامەکانی دەستڕاگەیشتنمان .
هەموو ئەوانەت دەستکەوتووە؟ زۆر باشە�� با بزانین چۆن کاردەکەن بە چەند نموونەیەک.
نموونە: لە هەموو شوێنێک ئامرازەکان چالاک بکە
یەکێک لە ڕێگاکان بۆ دەستپێکردنی هەموو ئامۆژگارییەکان لە لاپەڕەیەکدا ئەوەیە کە بەپێی تایبەتمەندییەکانیان هەڵیانبژێریت 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)
ڕژان auto
و ...scroll
شوێنی Tooltip هەوڵدەدات بە شێوەیەکی ئۆتۆماتیکی بگۆڕێت کاتێک کۆنتێنەرێکی باوک خاوەنی overflow: auto
یان overflow: scroll
حەزی لە ئێمەیە .table-responsive
، بەڵام هێشتا شوێنی جێگیرکردنی ئەسڵی دەهێڵێتەوە. بۆ چارەسەرکردنی ئەمە، boundary
هەڵبژاردەکە (بۆ دەستکاریکەری فلیپ بە بەکارهێنانی popperConfig
هەڵبژاردەکە) دابنێ بۆ هەر HTMLElement بۆ سەرپێچی بەهای پێشوەختە، 'clippingParents'
, وەک document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
مارکاپ
ئاماژەپێکراوی پێویست بۆ ئامۆژگارییەک تەنها data
تایبەتمەندییەکە و title
لەسەر توخمەکەی HTML دەتەوێت ئامرازێکت هەبێت. مارکاپی دروستکراوی ئامرازێک تا ڕادەیەک سادەیە، هەرچەندە پێویستی بە شوێنێک هەیە (بە شێوازی پێشوەختە، top
لەلایەن پێوەکراوەکەوە بۆ دانراوە).
کردنی ئامرازەکان بۆ بەکارهێنەرانی کیبۆرد و تەکنەلۆژیای یارمەتیدەر کاربکەن
تەنها پێویستە ئامۆژگاری ئامرازەکان زیاد بکەیت بۆ ئەو توخمانەی HTML کە بە شێوەیەکی نەریتی دەتوانرێت لەسەر کیبۆرد بێت و کارلێککارانە بن (وەک بەستەرەکان یان کۆنتڕۆڵەکانی فۆڕم). هەرچەندە دەتوانرێت توخمە HTML ی ئارەزوومەندانە (وەک <span>
s) بە زیادکردنی تایبەتمەندییەکە بکرێتە فۆکەس tabindex="0"
، بەڵام ئەمە وەستانی تابەکانی ئەگەری بێزارکەر و سەرلێشێواو لەسەر توخمە ناکارلێککەرەکان بۆ بەکارهێنەرانی کیبۆرد زیاد دەکات، و زۆربەی تەکنەلۆژیا یارمەتیدەرەکان لە ئێستادا ئامۆژگاری ئامرازەکە لەم دۆخەدا ڕاناگەیەنن. سەرەڕای ئەوە، تەنها پشت hover
بە دەستپێکەرێک مەبەستە بۆ ئامۆژگاری ئامرازەکانت، چونکە ئەمە وا دەکات ئامرازەکانت مەحاڵ بێت بۆ بەکارهێنەرانی کیبۆرد دەستپێبکەن.
<!-- 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"
.
sanitize
,
sanitizeFn
, و
بە بەکارهێنانی تایبەتمەندییەکانی داتا دابین بکرێت.allowList
ناو | جۆر | بنەڕەتی | وەسف |
---|---|---|---|
animation |
boolean | true |
گواستنەوەی کاڵبوونەوەی CSS بۆ ئامرازەکە جێبەجێ بکە |
container |
ڕستە | توخم | هەڵە | false |
ئامۆژگاری ئامرازەکە بە توخمێکی دیاریکراوەوە دەبەستێتەوە. نموونە: |
delay |
ژمارە | شت | 0 |
دواکەوتنی پیشاندانی و شاردنەوەی ئامۆژگاری ئامرازەکان (ms) - جۆری دەستپێکەری دەستی ناگرێتەوە ئەگەر ژمارەیەک دابین کرا، دواکەوتن بۆ هەردوو شاردنەوە/نیشاندان جێبەجێ دەکرێت پێکهاتەی شت بریتییە لە: |
html |
boolean | false |
لە ئامرازەکەدا ڕێگە بە HTML بدە. ئەگەر ڕاست بێت، تاگەکانی HTML لە tooltip's لە tooltip's ڕەندەر ئەگەر نیگەرانیت لە هێرشەکانی XSS دەق بەکاربهێنە. |
placement |
ڕستە | کردار | 'top' |
چۆنێتی جێگیرکردنی ئامرازەکان - auto | سەرەوە | خوارەوە | چەپ | ڕاست. کاتێک فەنکشنێک بەکاردەهێنرێت بۆ دیاریکردنی شوێنەکە، بانگ دەکرێت بە گرێی DOMی ئامرازی وەک یەکەم ئارگومێنت و توخمە دەستپێکەرەکە گرێی DOM وەک دووەم. کۆنتێکستەکە |
selector |
ڕستە | هەڵە | false |
ئەگەر هەڵبژێرەرێک دابین بکرێت، شتەکانی ئامۆژگاری ئامرازەکان دەدرێنە ئامانجە دیاریکراوەکان. لە پراکتیکدا، ئەمە بەکاردێت بۆ هەروەها جێبەجێکردنی ئامۆژگاری ئامرازەکان بۆ توخمەکانی DOM زیادکراوی داینامیکی ( jQuery.on پشتگیری). ئەمە و نموونەیەکی زانیاری ببینە . |
template |
ڕستە | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
بنەمای HTML بۆ بەکارهێنان لە کاتی دروستکردنی ئامرازەکەدا. ئامرازەکان
دەرەوەترین توخمە پێچراوەکە دەبێت |
title |
ڕستە | توخم | کردار | '' |
بەهای ناونیشانی پێشوەختە ئەگەر ئەگەر فەنکشنێک بدرێت، ئەوا بانگ دەکرێت بە |
trigger |
ڕستە | 'hover focus' |
چۆن tooltip دەستپێدەکات - کلیک لە | بکە hover | فۆکەس | بەدەستی. لەوانەیە چەندین تریگەر تێپەڕێنیت؛ بە بۆشایییەک جیایان بکەرەوە.
|
fallbackPlacements |
ڕیزبەندی | ['top', 'right', 'bottom', 'left'] |
پێناسەی شوێنەکانی fallback بکە بە دابینکردنی لیستی شوێنەکان لە ڕیزبەندی (بە رێکوپێکی پەسەندکردن). بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی هەڵسوکەوتی پۆپەر بکە |
boundary |
ڕستە | پێکهاتە | 'clippingParents' |
سنووری سنووردارکردنی Overflow ی ئامۆژگاری ئامرازەکە (تەنها بۆ دەستکاریکەری preventOverflow ی Popper دەگونجێت). بە شێوازی پێشوەختە 'clippingParents' ئاماژەی HTMLElement یە و دەتوانێت قبوڵ بکات (تەنها لە ڕێگەی جاڤاسکڕێپتەوە). بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی detectOverflow ی Popper بکە . |
customClass |
ڕستە | کردار | '' |
کاتێک پیشان دەدرێت پۆلەکان زیاد بکە بۆ ئامرازەکە. تێبینی بکە کە ئەم پۆلانە زیاد دەکرێن جگە لە هەر پۆلێک کە لە قاڵبەکەدا دیاری کراوە. بۆ زیادکردنی چەندین پۆل، بە بۆشایی جیایان بکەرەوە: هەروەها دەتوانیت فەنکشنێک تێپەڕێنیت کە دەبێت یەک ڕستە بگەڕێنێتەوە کە ناوی پۆلی زیادەی تێدایە. |
sanitize |
boolean | true |
پاککردنەوەکە چالاک یان ناچالاک بکە. ئەگەر چالاک بێت 'template' و 'title' بژاردەکان پاک دەکرێنەوە. سەیری بەشی پاککەرەوە بکە لە بەڵگەنامەکانی جاڤاسکڕێپتەکەماندا . |
allowList |
شت | بةهاى دواكةوتن | شتێک کە تایبەتمەندی و تاگی ڕێگەپێدراو لەخۆدەگرێت |
sanitizeFn |
پووچ | کردار | null |
لێرەدا دەتوانیت کارایی پاککردنەوەی خۆت دابین بکەیت. ئەمە دەتوانێت بەسوود بێت ئەگەر پێت باشە کتێبخانەی تایبەت بەکاربهێنیت بۆ ئەنجامدانی پاکوخاوێنی. |
offset |
ڕیزبەندی | ڕستە | کردار | [0, 0] |
ئۆفسێتی ئامرازەکە بە بەراورد بە ئامانجەکەی. دەتوانیت ڕستەیەک لە تایبەتمەندییەکانی داتادا بە بەها جیاکراوەکانی کۆما وەک: کاتێک فەنکشنێک بەکاردەهێنرێت بۆ دیاریکردنی ئۆفسێتەکە، بە ئۆبجێکتیک بانگ دەکرێت کە شوێنی پۆپەر و ئاماژە و پۆپەر rects وەک یەکەم ئارگومێنتی تێدایە. گرێی DOM ی توخمە دەستپێکەر وەک ئارگومێنتی دووەم دەگوازرێتەوە. فەنکشنەکە دەبێت ڕیزبەندییەک بگەڕێنێتەوە بە دوو ژمارەی: . بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی ئۆفسێتی پۆپەر بکە . |
popperConfig |
پووچ | شت | کردار | null |
بۆ گۆڕینی ڕێکخستنی پێشوەختەی Popper ی Bootstrap، سەیری ڕێکخستنی Popper بکە . کاتێک فەنکشنێک بەکاردەهێنرێت بۆ دروستکردنی ڕێکخستنی Popper، بە شتێک بانگ دەکرێت کە ڕێکخستنی پێشوەختەی Popper ی Bootstrap لەخۆدەگرێت. یارمەتیت دەدات کە پێشوەختە لەگەڵ ڕێکخستنی خۆت بەکاربهێنیت و تێکەڵیان بکەیت. فەنکشنەکە دەبێت شتێکی ڕێکخستن بۆ Popper بگەڕێنێتەوە. |
تایبەتمەندیەکانی داتا بۆ ئامۆژگاری تاکەکەسی
دەتوانرێت بژاردەکان بۆ ئامۆژگارییە تاکەکەسییەکان بە شێوەیەکی جێگرەوە لە ڕێگەی بەکارهێنانی تایبەتمەندییەکانی داتاوە دیاری بکرێت، وەک لە سەرەوە ڕوون کراوەتەوە.
بەکارهێنانی فەنکشن لەگەڵpopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
شێوازەکان
شێواز و گواستنەوە ناهاوسەنگەکان
هەموو شێوازەکانی API ناهاوسەنگن و دەست بە گواستنەوە دەکەن . هەر کە گواستنەوەکە دەستی پێکرد بەڵام پێش ئەوەی کۆتایی بێت دەگەڕێنەوە لای پەیوەندیکەرەکە . سەرەڕای ئەوە، بانگەوازێکی میتۆد لەسەر پێکهاتەیەکی گواستنەوە پشتگوێ دەخرێت .
نیشاندان
ئامۆژگاری ئامرازی توخمێک ئاشکرا دەکات. پێش ئەوەی ئامۆژگاری ئامرازەکە لە ڕاستیدا پیشان بدرێت (واتە پێش ئەوەی 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
ڕووداوەکان
جۆری ڕووداو | وەسف |
---|---|
show.bs.tooltip |
ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک show شێوازی نموونە بانگ دەکرێت. |
shown.bs.tooltip |
ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە ئامۆژگاری ئامرازەکە بۆ بەکارهێنەر دیار کراوە (چاوەڕێی تەواوبوونی گواستنەوەکانی CSS دەکات). |
hide.bs.tooltip |
ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hide شێوازی نموونە بانگ کراوە. |
hidden.bs.tooltip |
ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە ئامۆژگاری ئامێرەکە تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕێ دەکات بۆ تەواوبوونی گواستنەوەکانی CSS). |
inserted.bs.tooltip |
ئەم ڕووداوە دوای show.bs.tooltip ڕووداوەکە کاتێک قاڵبی ئامۆژگاری ئامرازەکان بۆ DOM زیاد کراوە، ئاگر دەکرێتەوە. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()