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 bootstrap.bundle.min.js/ bootstrap.bundle.jsiyo ine Popper kuitira kuti matipi ekushandisa!
• 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.

Muenzaniso: Gonesa matipi ekushandisa kwese kwese

Imwe nzira yekutanga matipi ezvishandiso pane peji ndeyekuvasarudza nehunhu hwavo data-bs-toggle:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Mienzaniso

Hover pamusoro pemalink ari pasi apa kuti uone maturusi ekushandisa:

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

Uye netsika HTML yakawedzerwa:

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

NeSVG:

Sass

Variables

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

Usage

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

Tamba chishandiso kuburikidza neJavaScript:

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

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" 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" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-bs-, semu data-bs-animation="". Ita shuwa yekushandura iyo kesi mhando yezita resarudzo kubva kameraCase kuenda ku kebab-kesi kana uchipfuura sarudzo kuburikidza ne data hunhu. Semuenzaniso, pane kushandisa data-bs-customClass="beautifier", shandisa data-bs-custom-class="beautifier".

Kushandisa basa nepopperConfig

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

Nzira

show

Inoratidza chekushandisa chechinhu. Inodzokera kumunhu arikufona tip rekushandisa risati ranyatsoratidzwa (kureva kuti shown.bs.tooltipchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yeturusitip. Zvishandiso zvine mazita akareba zero hazvimbotaridzwa.

tooltip.show()

hide

Inovanza zano rekushandisa. Inodzokera kune ari kufona chitupa chisati chavanzwa (kureva kuti hidden.bs.tooltipchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yeturusitip.

tooltip.hide()

toggle

Inoshandura matipi echinhu. Inodzokera kune ari kufona chitupa chisati charatidzwa kana kuvanzwa (kureva kuti shown.bs.tooltipkana hidden.bs.tooltipchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yeturusitip.

tooltip.toggle()

kurasa

Inoviga uye inoparadza chishandiso chechinhu (Inobvisa data rakachengetwa pachinhu cheDOM). Zvishandiso zvinoshandisa kugovera (zvinogadzirwa pachishandiswa sarudzoselector ) hazvingaparadzwi pachega pazvikamu zvinokonzeresa zvedzinza .

tooltip.dispose()

enable

Inopa chekushandisa chechinhu kugona kuratidzwa. Zvishandiso zvinogoneswa nekusarudzika.

tooltip.enable()

disable

Inobvisa kugona kwetip yechinhu kuti iratidzwe. Iyo tooltip inongokwanisa kuratidzwa kana yakabatidzwa zvakare.

tooltip.disable()

toggleEnabled

Inoshandura kugona kwetip yechinhu kuti ionekwe kana kuvanzwa.

tooltip.toggleEnabled()

update

Inogadziridza nzvimbo yetip yechinhu.

tooltip.update()

getInstance

Static nzira iyo inokutendera iwe kuti uwane iyo tooltip muenzaniso yakabatana neDOM chinhu

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

Static nzira iyo inokutendera iwe kuti uwane iyo tooltip muenzaniso yakabatana neDOM chinhu, kana kugadzira imwe nyowani kana isina kutangwa.

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Zviitiko

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

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

tooltip.hide()