Кеңестер

Шолу

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

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

Бағыттар

Құрал кеңестерінің төрт бағытын көру үшін төмендегі түймелердің үстіне апарыңыз: жоғарғы, оң, төменгі және сол жақ. RTL жүйесінде Bootstrap пайдаланған кезде бағыттар шағылыстырылады.

<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

Айнымалылар

.tooltipBootstrap-тың дамып келе жатқан CSS айнымалы мәндерінің бір бөлігі ретінде, құралдар кеңестері нақты уақытта жақсартылған теңшеу үшін жергілікті CSS айнымалы мәндерін пайдаланады . 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интерактивті емес, яғни пайдаланушылар кеңесті (немесе қалқымалы терезені) іске қосу үшін оларды фокустай алмайды, меңзерді апара алмайды немесе баса алмайды. Шешім ретінде сіз орауыштан құралдар кеңесін іске қосқыңыз келеді <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 нұсқасы бойынша барлық компоненттер қарапайым құрамдас конфигурациясын JSON жолы ретінде орналастыра алатын эксперименттік сақталған деректер төлсипатын қолдайды. data-bs-configЭлементте 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()