Маслиҳатҳо

Барраси

Чизҳоеро, ки ҳангоми истифодаи плагини абзор бояд донист:

• Маслиҳатҳои асбобҳо барои ҷойгиркунӣ ба китобхонаи тарафи сеюм Popper такя мекунанд. Шумо бояд пеш аз bootstrap.js.bootstrap.bundle.min.js
• Маслиҳатҳои асбобҳо бо сабабҳои кор қабул карда мешаванд, аз ин рӯ шумо бояд онҳоро худатон оғоз кунед .
• Маслиҳатҳои асбобҳо бо унвонҳои дарозии сифр ҳеҷ гоҳ намоиш дода намешаванд.
• Барои container: 'body'пешгирӣ кардани мушкилот дар ҷузъҳои мураккабтар муайян кунед (ба монанди гурӯҳҳои вуруди мо, гурӯҳҳои тугмаҳо ва ғайра).
• Ба кор андохтани маслиҳатҳои асбобҳо дар унсурҳои пинҳон кор намекунад.
• Маслиҳатҳои асбобҳо барои .disabledё disabledунсурҳо бояд дар унсури печанда фаъол карда шаванд.
• Вақте ки аз гиперҳаволаҳое, ки сатрҳои сершуморро дарбар мегиранд, оғоз карда мешаванд, маслиҳатҳои асбобҳо дар марказ ҷойгир карда мешаванд. Барои пешгирӣ кардани ин рафтори white-space: nowrap;худ истифода баред .<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};
  

Тағйирёбандаҳои 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:                    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

Истифода

Васлкунаки асбобҳо мундариҷа ва аломатҳоро мувофиқи дархост тавлид мекунад ва ба таври нобаёнӣ маслиҳатҳои абзорро пас аз унсури триггери худ ҷойгир мекунад.

Маслиҳати абзорро тавассути JavaScript фаъол созед:

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атрибут интерактивӣ нестанд, яъне корбарон наметавонанд диққати худро ба он ҷо оваранд ё клик кунанд, то маслиҳати абзорро (ё popover) оғоз кунанд. Ҳамчун як роҳи ҳал, шумо мехоҳед, ки маслиҳати абзорро аз парпеч ё бо истифода <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>

Имконот

Азбаски вариантҳоро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст, шумо метавонед номи опсияро ба 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()