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

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

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

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

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

نموونە

ئامرازەکان چالاک بکە

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

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

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

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

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

ئامۆژگاری تایبەت بەخۆت

دەتوانیت بە بەکارهێنانی گۆڕاوەکانی CSS دەرکەوتنی ئامرازەکان بەپێی خواستی خۆت دابنێیت . ئێمە پۆلێکی تایبەتمان لەگەڵ data-bs-custom-class="custom-tooltip"دادەنێین بۆ مەودای دەرکەوتنی تایبەتمەندیمان و بەکاریدەهێنین بۆ سەرپێچی گۆڕاوێکی CSSی ناوخۆیی.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

ئاراستەکان

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

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
  Tooltip on left
</button>

وە لەگەڵ زیادکردنی HTML تایبەت:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

لەگەڵ SVG:

CSS

گۆڕاوەکان

وەک بەشێک لە نزیکبوونەوەی گۆڕاوە CSS ی پەرەسەندوو لە Bootstrap، ئێستا ئامۆژگاری ئامرازەکان گۆڕاوە ناوخۆییەکانی CSS بەکاردەهێنن لەسەر .tooltipبۆ باشترکردنی خۆکارکردنی کاتی ڕاستەقینە. بەهاکان بۆ گۆڕاوەکانی CSS لە ڕێگەی Sass دادەنرێت، بۆیە هێشتا پشتگیری لە خۆکارکردنی Sass دەکرێت، هەروەها.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

گۆڕاوەکانی ساس

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

بەکارهێنان

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

ئامرازەکە لە ڕێگەی جاڤاسکڕێپتەوە دەستپێبکە:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

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

مارکاپ

ئاماژەپێکراوی پێویست بۆ ئامۆژگارییەک تەنها dataتایبەتمەندییەکە و titleلەسەر توخمەکەی HTML دەتەوێت ئامرازێکت هەبێت. مارکاپی دروستکراوی ئامرازێک تا ڕادەیەک سادەیە، هەرچەندە پێویستی بە شوێنێک هەیە (بە شێوازی پێشوەختە، topلەلایەن پێوەکراوەکەوە بۆ دانراوە).

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

بژاردەکان

بەو پێیەی دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت، دەتوانیت ناوی هەڵبژاردنێک زیاد بکەیت بۆ data-bs-, وەک لە data-bs-animation="{value}". دڵنیابە لە گۆڕینی جۆری کەیسی ناوی هەڵبژاردنەکە لە “ camelCase ” بۆ “ kebab-case ” لە کاتی تێپەڕاندنی هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا. بۆ نموونە data-bs-custom-class="beautifier"لەبری data-bs-customClass="beautifier".

لە Bootstrap 5.2.0 ەوە، هەموو پێکهاتەکان پشتگیری لە تایبەتمەندییەکی داتا یەدەگی تاقیکاریdata-bs-config دەکەن کە دەتوانێت ڕێکخستنی پێکهاتەی سادە وەک ڕستەیەکی JSON لەخۆبگرێت. کاتێک توخمێک تایبەتمەندی data-bs-config='{"delay":0, "title":123}'و data-bs-title="456"تایبەتمەندیەکانی هەیە، titleبەهای کۆتایی دەبێت 456و تایبەتمەندییە جیاوازەکانی داتا بەهاکان دەگۆڕن کە لە data-bs-config. سەرەڕای ئەوە، تایبەتمەندییە داتاکانی ئێستا دەتوانن بەهاکانی JSON وەک data-bs-delay='{"show":0,"hide":150}'.

بەکارهێنانی فەنکشن لەگەڵpopperConfig

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

شێوازەکان

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

ڕووداوەکان

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()