Lisebelisoa

Kakaretso

Lintho tseo u lokelang ho li tseba ha u sebelisa plugin ea tooltip:

• Litlhahiso li itšetlehile ka laeborari ea batho ba boraro ea Popper bakeng sa maemo. U tlameha ho kenyelletsa popper.min.js pele ho bootstrap.js, kapa u sebelise e bootstrap.bundle.min.jsnang le Popper.
• Litlhahiso ke tsa ho kena ka mabaka a ts'ebetso, kahoo u tlameha ho li qala ka bouena .
• Lisebelisoa tse nang le lihlooho tsa bolelele ba zero ha li hlahisoe.
• Hlakisa container: 'body'ho qoba ho fana ka mathata ka likarolo tse rarahaneng (joalo ka lihlopha tsa rona tsa ho kenya, lihlopha tsa likonopo, joalo-joalo).
• Ho kenya lisebelisoa ho lisebelisoa tse patiloeng ho ke ke ha sebetsa.
• Lisebelisoa tsa lisebelisoa .disabledkapa disabledlikarolo li tlameha ho hlahisoa holim'a karolo ea wrapper.
• Ha e hlahisoa ho tsoa ho li-hyperlink tse nang le mela e mengata, lisebelisoa tsa lisebelisoa li tla ba teng. Sebelisa white-space: nowrap;ho hao <a>ho qoba boitšoaro bona.
• Lisebelisoa li tlameha ho patoa pele likarolo tsa tsona tse tsamaellanang li tlosoa ho DOM.
• Lisebelisoa li ka hlahisoa ka lebaka la ntho e ka hare ho moriti oa DOM.

O nale tseo tsohle? E kholo, a re boneng hore na ba sebetsa joang ka mehlala e meng.

Mehlala

Lumella lisebelisoa tsa lisebelisoa

Joalokaha ho boletsoe ka holimo, u tlameha ho qala lisebelisoa tsa lisebelisoa pele li ka sebelisoa. Tsela e 'ngoe ea ho qala lisebelisoa tsohle tse leqepheng e tla ba ho li khetha ka data-bs-toggletšobotsi ea tsona, joalo ka:

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

Lisebelisoa tsa li-link

Tsamaea holim'a lihokelo tse ka tlase ho bona lintlha tsa lisebelisoa:

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

Lisebelisoa tse ikhethileng

U ka etsa hore ponahalo ea lithulusi u sebelise mefuta e fapaneng ea CSS . Re theha sehlopha sa tloaelo se nang le data-bs-custom-class="custom-tooltip"ho lekanya ponahalo ea rona ea tloaelo le ho e sebelisa ho fetisa phapang ea lehae ea 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>

Litsela

Tsamaea holim'a likonopo tse ka tlase ho bona litsela tse 'ne tsa lisebelisoa: holimo, ho le letona, tlase le le letšehali. Litaelo li bonts'oa ha u sebelisa Bootstrap ho 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>

'Me ka HTML e tloaelehileng e ekelitsoe:

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

Ka SVG:

CSS

Lintho tse fapaneng

E le karolo ea mokhoa oa ho fetoha oa CSS oa Bootstrap, lisebelisoa tsa lisebelisoa joale li sebelisa mefuta-futa ea CSS ea lehae .tooltipbakeng sa ho ntlafatsa nako ea sebele. Litekanyetso tsa mefuta-futa ea CSS li behiloe ka Sass, kahoo mokhoa oa Sass o ntse o tšehetsoa, ​​le oona.

  --#{$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};
  

Mefuta e fapaneng ea 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

Tšebeliso

plugin ea tooltip e hlahisa litaba le markup ha ho hlokahala, 'me ka ho sa feleng e beha malebela ka mor'a ntho ea eona ea ho qala.

Qala sesebelisoa ka 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')
})

Markup

Letšoao le hlokahalang bakeng sa sesebelisoa ke datatšobotsi feela 'me titleho karolo ea HTML u lakatsa ho ba le sesebelisoa. Thepa e hlahisitsoeng ea sesebelisoa e bonolo, leha e hloka boemo (ka kamehla, e behiloeng topke plugin).

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

Lintho tse holofetseng

Lintho tse nang le disabledtšobotsi ha li sebelisane, ho bolelang hore basebelisi ha ba khone ho tsepamisa maikutlo, ho ōka, kapa ho li tobetsa ho kenya lisebelisoa (kapa popover). Joalo ka mokhoa oa ho sebetsa, o tla batla ho qala sesebelisoa ho tsoa ho sephutheloana <div>kapa <span>, se etselitsoeng hantle hore se tsepamise mohopolo ho sebelisa 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>

Dikgetho

Kaha likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript, u ​​ka kenyelletsa lebitso la khetho ho data-bs-, joalo ka data-bs-animation="{value}". Etsa bonnete ba hore o fetola mofuta oa nyeoe ea lebitso la khetho ho tloha " camelCase "ho " kebab-case " ha o fetisa likhetho ka litšobotsi tsa data. Ka mohlala, sebelisa data-bs-custom-class="beautifier"ho e-na le data-bs-customClass="beautifier".

Ho tloha ka Bootstrap 5.2.0, likarolo tsohle li ts'ehetsa tlhahlobo ea data e bolokiloeng data-bs-confige ka bolokang tlhophiso e bonolo ea karolo joalo ka khoele ea JSON. Ha element e na data-bs-config='{"delay":0, "title":123}'le data-bs-title="456"litšoaneleho, boleng ba ho qetela titlebo tla ba 456'me lintlha tse arohaneng tsa data li tla feta boleng bo fanoeng ho data-bs-config. Ntle le moo, litšoaneleho tse teng tsa data li khona ho boloka boleng ba JSON joalo ka data-bs-delay='{"show":0,"hide":150}'.

Ho sebelisa ts'ebetso lepopperConfig

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

Mekhoa

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

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

Events

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

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

tooltip.hide()