قورال قوراللىرى

ئومۇمىي چۈشەنچە

قورال قىستۇرمىسىنى ئىشلەتكەندە بىلىشكە تېگىشلىك ئىشلار:

• قورال قوراللىرى ئورۇن بەلگىلەش ئۈچۈن 3-تەرەپ كۈتۈپخانىسى Popper غا تايىنىدۇ . Bootstrap.js دىن بۇرۇن popper.min.js نى ئۆز ئىچىگە ئېلىشىڭىز ياكى قورال قوراللىرىنىڭ ئىشلىشى ئۈچۈن Popper نى ئىشلىتىڭ bootstrap.bundle.min.js/ ئىشلىتىڭ.bootstrap.bundle.js
• قورال قوراللىرى ئىقتىدار سەۋەبىدىن تاللىنىدۇ ، شۇڭا چوقۇم ئۆزىڭىز باشلىشىڭىز كېرەك .
• نۆل ئۇزۇنلۇقتىكى ماۋزۇلار بار قوراللار ھەرگىز كۆرۈنمەيدۇ.
• تېخىمۇ مۇرەككەپ زاپچاسلاردا مەسىلە پەيدا قىلىشتىن ساقلىنىشنى بەلگىلەڭ container: 'body'(بىزنىڭ كىرگۈزۈش گۇرۇپپىلىرىمىز ، كۇنۇپكا گۇرۇپپىلىرىمىز دېگەندەك).
• يوشۇرۇن ئېلېمېنتلارنى قوزغىتىش قوراللىرى ئىشلىمەيدۇ.
• قورال .disabledياكى disabledئېلېمېنتلار چوقۇم ئورالغان ئېلېمېنتتا قوزغىتىلىشى كېرەك.
• كۆپ قۇرنى ئۆز ئىچىگە ئالغان ئۇلىنىشتىن قوزغالغاندا ، قورال كۆرسەتمىلىرى مەركەزلىك بولىدۇ. بۇ ھەرىكەتتىن ساقلىنىش ئۈچۈن s white-space: nowrap;نى ئىشلىتىڭ .<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)
})

مىساللار

تۆۋەندىكى ئۇلىنىشلارنى بېسىپ قورال قوراللىرىنى كۆرۈڭ:

تۆۋەندىكى كۇنۇپكىلارنى بېسىپ تۇرۇپ ، ئۈستى ، ئوڭ ، ئاستى ۋە سولدىن ئىبارەت تۆت قورال كۆرسەتمىسىنى كۆرۈڭ. RTL دا Bootstrap نى ئىشلەتكەندە يۆنىلىش ئەينەك قىلىنغان.

<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 بىلەن:

Sass

ئۆزگەرگۈچى مىقدار

$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;

ئىشلىتىش

قورال قورال قىستۇرمىسى ئېھتىياجغا ئاساسەن مەزمۇن ۋە بەلگە ھاسىل قىلىدۇ ، سۈكۈتتىكى ھالەتتە قوزغىتىش قوراللىرى قوزغاتقۇچ ئېلېمېنتىدىن كېيىن.

قورال قورالنى JavaScript ئارقىلىق قوزغىتىڭ:

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')
})

Markup

قورال كۆرسەتكۈچىگە لازىملىق بەلگە پەقەت بىر 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>

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا 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
  }
})

Methods

show

بىر ئېلېمېنتنىڭ قورال قوراللىرىنى ئاشكارىلايدۇ. قورال كۆرسەتكۈچى ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . shown.bs.tooltipبۇ قورال قورالنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ. نۆل ئۇزۇنلۇقتىكى ماۋزۇلار بار قوراللار ھەرگىز كۆرۈنمەيدۇ.

tooltip.show()

يوشۇر

ئېلېمېنتنىڭ قورال قوراللىرىنى يوشۇرىدۇ. قورال كۆرسەتكۈچى ئەمەلىيەتتە يوشۇرۇلۇشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . hidden.bs.tooltipبۇ قورال قورالنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ.

tooltip.hide()

toggle

ئېلېمېنتنىڭ قورال قوراللىرىنى بىر تەرەپ قىلىدۇ. قورال كۆرسەتكۈچى ئەمەلىيەتتە كۆرسىتىش ياكى يوشۇرۇشتىن بۇرۇن (يەنى ۋەقە ياكى ھادىسە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . بۇ قورال قورالنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ.shown.bs.tooltiphidden.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

Events

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()