Tooltips

Overview

Zvinhu zvekuziva kana uchishandisa tooltip plugin:

• Maturusi anotsamira pane yechitatu bato raibhurari Popper yekumisikidza . Unofanira kusanganisira popper.min.js pamberi bootstrap.js, kana kushandisa imwe bootstrap.bundle.min.jsine Popper.
• Maturusi ndeekupinda nekuda kwezvikonzero zvekuita, saka iwe unofanirwa kuzvitangisa iwe pachako .
• Zvishandiso zvine mazita akareba zero hazvimbotaridzwa.
• Nyora container: 'body'kudzivirira kupa matambudziko muzvikamu zvakaoma zvikuru (semapoka edu ekuisa, mapoka emabhatani, nezvimwe).
• Kuvhura matipi ekushandisa pazvinhu zvakavanzika hazvishande.
• .disabledMaturusi ezvishandiso kana maelement disabledanofanira kukonzereswa pachinhu chekuputira.
• Kana yakatangwa kubva kune hyperlink inotenderera mitsetse yakawanda, matipi ezvishandiso anozoiswa pakati. Shandisa white-space: nowrap;pane yako <a>kudzivirira maitiro aya.
• Zvishandiso zvinofanirwa kuvanzwa zvisati zvabviswa zvinhu zvinoenderana nazvo muDOM.
• Zvishandiso zvinogona kukonzereswa nekuda kwechinhu chiri mukati memumvuri DOM.

Une zvese izvozvo? Zvakanaka, ngationei kuti vanoshanda sei nemimwe mienzaniso.

Mienzaniso

Vhura matipi ekushandisa

Sezvataurwa pamusoro apa, unofanira kutanga maturusi ekushandisa asati ashandiswa. Imwe nzira yekutanga matipi ekushandisa pane peji ingave yekuvasarudza nehunhu hwavo, sekudaro data-bs-toggle:

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

Zvishandiso pane zvinongedzo

Hover pamusoro pemalink ari pasi apa kuti uone maturusi ekushandisa:

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

Custom tooltips

Unogona kugadzirisa kutaridzika kwematipi ekushandisa uchishandisa CSS zvinosiyana . Isu tinoseta kirasi data-bs-custom-class="custom-tooltip"yetsika nekutarisa kutaridzika kwedu kwetsika uye kuishandisa kupfuudza yemuno CSS kusiyanisa.

.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>

Nhungamiro

Famba pamusoro pemabhatani ari pazasi kuti uone mana ezvishandiso nzira: kumusoro, kurudyi, pasi, uye kuruboshwe. Mafambiro anotaridzwa kana uchishandisa Bootstrap muRTL.

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

Uye netsika HTML yakawedzerwa:

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

NeSVG:

CSS

Variables

Sechikamu cheBootstrap's evolving CSS variables approach, matipi ekushandisa zvino anoshandisa emuno CSS machinjiro pakusimudzira .tooltipchaiyo-nguva kugadzirisa. Hwaro hwemhando dzeCSS dzakaiswa kuburikidza neSass, saka Sass customization ichiri kutsigirwa, zvakare.

  --#{$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 zvakasiyana

$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

Usage

Iyo tooltip plugin inogadzira zvirimo uye markup pane inodiwa, uye neyakagadzika nzvimbo matipi eturusi mushure meiyo trigger element.

Tamba chishandiso kuburikidza neJavaScript:

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

Markup

Mucherechedzo unodiwa wetipi yeturusi ingori datahunhu uye titlepane HTML chinhu chaunoshuvira kuve nechokushandisa. Iyo yakagadzirwa markup yeturusitip iri nyore, kunyangwe ichida chinzvimbo (nekumisikidza, yakarongedzwa topneplugin).

<!-- 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>

Zvinhu zvakaremara

Zvinhu zvine disabledhunhu hazvidyidzane, zvichireva kuti vashandisi havagone kutarisa, kutenderedza, kana kudzvanya kuti vatange chishandiso (kana popover). Sekushanda, iwe unozoda kukonzeresa chishandiso kubva pakuputira <div>kana <span>, yakanyatsogadzirwa keyboard-inotariswa uchishandisa 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>

Options

Sezvo sarudzo dzichigona kupfuudzwa kuburikidza nedata hunhu kana JavaScript, unogona kuisa sarudzo zita ku data-bs-, semu data-bs-animation="{value}". Ita shuwa yekushandura mhando yekesi yezita resarudzo kubva ku " camelCase " kuenda ku " kebab-case " kana uchipfuura sarudzo kuburikidza ne data hunhu. Somuenzaniso, shandisa data-bs-custom-class="beautifier"pane data-bs-customClass="beautifier".

Kubva kuBootstrap 5.2.0, zvese zvinongedzo zvinotsigira muyedzo wakachengetedzwa data hunhu data-bs-confighunogona kuisa akareruka chechikamu kumisikidzwa setambo yeJSON. Kana chinhu chine data-bs-config='{"delay":0, "title":123}'uye data-bs-title="456"hunhu, kukosha kwekupedzisira titlekuchave 456uye iyo yakaparadzana data hunhu inodarika kukosha kwakapihwa pa data-bs-config. Pamusoro pezvo, hunhu huripo hwe data hunokwanisa kuisa hunhu hweJSON senge data-bs-delay='{"show":0,"hide":150}'.

Kushandisa basa nepopperConfig

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

Nzira

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

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

Zviitiko

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

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

tooltip.hide()