Кеңестер

Шолу

Құралдар плагинін пайдалану кезінде білу керек нәрселер:

• Кеңестер орналасу үшін үшінші тарап кітапханасының Попперіне сүйенеді . Кеңестер жұмыс істеуі үшін bootstrap.js алдында popper.min.js қосу керек немесе Popper бар bootstrap.bundle.min.js/ пайдалану керек bootstrap.bundle.js!
• Құрал кеңестері өнімділік себептеріне байланысты қосылады, сондықтан оларды өзіңіз баптандыруыңыз керек .
• Ұзындығы нөлдік тақырыптары бар құралдар кеңестері ешқашан көрсетілмейді.
• container: 'body'Күрделі құрамдас бөліктерде (мысалы, енгізу топтары, түймелер топтары, т.б.) ақауларды көрсетпеу үшін көрсетіңіз .
• Жасырын элементтерде кеңестерді іске қосу жұмыс істемейді.
• .disabledОрау элементінде немесе элементтерге арналған құралдар кеңестері disabledіске қосылуы керек.
• Бірнеше жолды қамтитын гиперсілтемелерден іске қосылғанда, құралдар кеңестері ортаға қойылады. Бұл әрекетті болдырмау үшін s white-space: nowrap;on yours пайдаланыңыз .<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 көмегімен:

Сасс

Айнымалылар

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

Белгілеу

Құрал кеңесі үшін қажетті түзету тек 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-тан кебаб-капқа өзгертуді ұмытпаңыз. Мысалы, пайдаланудың орнына 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
  }
})

Әдістері

көрсету

Элементтің құралдар кеңесін көрсетеді. Құрал кеңесі нақты көрсетілмей тұрып (яғни оқиға болғанға дейін) қоңырау шалушыға оралады . shown.bs.tooltipБұл құралдар кеңесінің «қолмен» іске қосылуы болып саналады. Ұзындығы нөлдік тақырыптары бар құралдар кеңестері ешқашан көрсетілмейді.

tooltip.show()

жасыру

Элементтің құралдар кеңесін жасырады. Құрал кеңесі шынымен жасырылғанға дейін (яғни hidden.bs.tooltipоқиға болғанға дейін) қоңырау шалушыға оралады. Бұл құралдар кеңесінің «қолмен» іске қосылуы болып саналады.

tooltip.hide()

ауыстырып қосқыш

Элементтің құралдар кеңесін ауыстырады. Құрал кеңесі нақты көрсетілмей немесе жасырылғанға дейін (яғни немесе оқиға болғанға дейін) қоңырау шалушыға оралады . Бұл құралдар кеңесінің «қолмен» іске қосылуы болып саналады.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

Оқиғалар

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

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

tooltip.hide()